ResponsiveSlides.js v1.55

Simple & lightweight responsive slider plugin (in 1kb)







ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like Microsoft's Build 2012 and Gridset App. ResponsiveSLides.js works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don't natively support it. Only dependency is jQuery (1.6 and up supported) and that all the images are same size.

Biggest difference to other responsive slider plugins is the file size (1.4kb minified and gzipped) + that this one doesn't try to do everything. Responsive Slides has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination and/or navigation to fade between slides.

Features

Fully responsive

1kb minified and gzipped

CSS3 transitions with JavaScript fallback

Simple markup using unordered list

Settings for transition and timeout durations

Multiple slideshows supported

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

Possibility to choose where the controls append to

Possibility to randomize the order of the slides

Possibility to use custom markup for pagination

Can be paused while hovering slideshow and/or controls

Images can be wrapped inside links

Optional 'before' and 'after' callbacks

Usage:

1. Link files

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="responsiveslides.min.js"></script>

2. Add Markup

<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>

3. Add CSS

.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; }

4. Hook up the slideshow

<script> $(function() { $(".rslides").responsiveSlides(); }); </script>

5. Options you can customize

$(".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 });

That's all! Download the latest version, this demo and changelog from Github. For more examples about the usage go here or view a demo with captions.

Example with options "auto:false" and "pager: true"







ResponsiveSlides.js is tested with the following browser

Internet Explorer 6,7,8,9

Firefox 3,6,8,11

Safari 5,5.1

Chrome 15,20

Opera 11,11.6

iOS Safari

Symbian 3 Webkit

Opera Mobile 10.1

Opera Mini for iOS

IE7, IE9 Mobile

Firefox Mobile

Android 2.3+

Kindle browser

Support

Please post your bug reports to GitHub issues. For support requests, use Stackoverflow.