ResponsiveSlides.js v1.54
+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.
++
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.
+ Download the latest version from GitHub + +