Responsive jQuery Slider Plugin
Yep, it’s a simple and lightweight responsive jQuery slider plugin to which we are all about going to discuss in this article. It is a tiny jQuery script which then makes a highly responsive slider by using the html list of items inside of tag <ul>. As the HTML is supported to wide range of web browsers yet IE versions from IE6 which makes it even more flexible in the browsers. However, it adds CSS max-width support for IE6 and other browsers that don’t natively support it.
Here’s what makes this simple and lightweight responsive slider plugin outstanding among other responsive slider plugins is that the image file size will be minified to 1.4kb and gzipped + this one doesn’t try to do everything.
Find out more: 30+ Best of Best Free Stylish Jquery SlideShow Plugins
Responsive Slider with ResponsiveSlides.js
This jQuery script has only two basic and different modes, the first mode is that either it automatically fades the images, and the second one operates as a responsive image container with pagination and/or navigation to fade between slides.
The main Key Features:
- Obviousely, fully responsive
- 1kb minified and gzipped
- The CSS3 transitions with JavaScript fallback
- It uses the HTML markup <ul>
- Complete settings for the transition and timeout durations
- Multiple slideshows supported
- Automatic and manual fade
- Compatible with Mobile Devices
- The captions and other html elements are supported inside on each slide
- Pagination next/prev controls
- Complete access to choose where the controls append to
- Possibility to randomize the order of the slides
- Custom markup can be used for pagination
- Can be paused while hovering slideshow and/or controls
How to Use?
First of all, load the scripts in the header using the <head> html tag like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>Secondly, just output the html using ul tag make sure the css classes and id’s are correct as written in the .css files which have loaded in the head section before.
<ul>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
Example no # 2 
