The ResponsiveSlides.js is a most lightweight Javascript plugin to build a responsive slider in no time. The plugin file is just about 1KB that means no load on your website.
This is a tiny Javascript plugin that allows you to create a fully responsive photo slider using the elements inside a container. It works with most of the browsers including IE versions.
The slider also added the max-width
for IE6 and other browsers which don’t have natively support it. This slider has two types of different modes.
Either it can automatically fade the images or operates with the help of pagination or navigation.
Features of Lightweight Slideshow
- Mobile friendly.
- 1kb minified and gzipped
- Added CSS3 transitions with the JavaScript fallback
- Simple markup using an unordered list
- Settings for transition and timeout durations
- define multiple slideshows.
- Automatic and manual fade
- Works in all major desktop and mobile browsers
- Captions and other HTML-elements supported inside slides
- Separate pagination and next/prev controls
- And many more.
How to Create a Responsive Slider
Add the following files into the header to get start it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="responsiveslides.min.js"></script>
Next, define the HTML markup and include your own images.
<ul class="rslides"> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> </ul>
Add the basic style and CSS3 animations.
.rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } .rslides li:first-child { position: relative; display: block; float: left; } .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }
Hook up the slideshow with Javascript
<script> $(function() { $(".rslides").responsiveSlides(); }); </script>
To customize, you have a lot of option to set true or false to make it as per your need of design.
$(".rslides").responsiveSlides({ auto: true, // Boolean: Animate automatically, true or false speed: 500, // Integer: Speed of the transition, in milliseconds timeout: 4000, // Integer: Time between slide transitions, in milliseconds pager: false, // Boolean: Show pager, true or false nav: false, // Boolean: Show navigation, true or false random: false, // Boolean: Randomize the order of the slides, true or false pause: false, // Boolean: Pause on hover, true or false pauseControls: true, // Boolean: Pause when hovering controls, true or false prevText: "Previous", // String: Text for the "previous" button nextText: "Next", // String: Text for the "next" button maxwidth: "", // Integer: Max-width of the slideshow, in pixels navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul' manualControls: "", // Selector: Declare custom pager navigation namespace: "rslides", // String: Change the default namespace used before: function(){}, // Function: Before callback after: function(){} // Function: After callback });
Just to make sure, to style the slider caption and arrow, you need to take the style from the demo.css which you can find in the download source.
But in our live demo, we have included the style in responsiveslides.css to make one file for the slideshow.