ResponsiveSlides - Lightweight Responsive Slider Plugin

ResponsiveSlides is a Simple & Lightweight Responsive Slider Plugin (1kb minified and gzipped) written in jQuery.

Features:

• Fully responsive
• 1kb minified and gzipped
• 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
• Can be paused while hovering slideshow and/or controls
• Images can be wrapped inside links
• Optional 'before' and 'after' callbacks

How to Use:

1. Include jQuery Library and responsiveslides js

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

2. CSS

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  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;
  }

3. Call the function with default options.

$(function () {
  $(".rslides").responsiveSlides();
});

4. The minimal 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>

5. Possible plugin options to customize the slider.

$(".rslides").responsiveSlides({

  // Boolean: Animate automatically, true or false
  auto: true,             

  // Integer: Speed of the transition, in milliseconds
  speed: 1000,            

  // Integer: Time between slide transitions, in milliseconds
  timeout: 4000,          

  // Boolean: Show pager, true or false
  pager: false,           

  // Boolean: Show navigation, true or false
  nav: false,             

  // Boolean: Randomize the order of the slides, true or false
  random: false,          

  // Boolean: Pause on hover, true or false
  pause: false,           

  // Boolean: Pause when hovering controls, true or false
  pauseControls: false,   

  // String: Text for the "previous" button
  prevText: "Previous",   

  // String: Text for the "next" button
  nextText: "Next",       

  // Integer: Max-width of the slideshow, in pixels
  maxwidth: "",       
 
  // Selector: Where auto generated controls should be appended to, default is after the <ul>
  "navContainer": "",           

  // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "",           

  // String: change the default namespace used
  namespace: "rslides",   

  // Function: Before callback
  before: function(){},   

  // Function: After callback
  after: function(){}     

});

Changelog:

v1.5.5 (2016-08-06)

• Add jQuery 3 support

---

This awesome jQuery plugin is developed by arielsalminen. For more Advanced Usages, please check the demo page or visit the official website.