Fully Responsive & Lightweight Slider Plugin – ResponsiveSlides.js

ResponsiveSlides.js is very lightweight and easy to use slider plugin that works in all major desktop and mobile browsers. There are various types of options that you can use accordingly to modify the slider as per the requirements.

Features:

• Works on all modern browsers.
• Easy to implement and lightweight.
• Fully responsive.
• Can be modified the design with CSS.
• Supports pager and nav.

How to use it:

1. Include the Javascript responsiveslides.min.js at the bottom of the web page.

<script src="path/to/responsiveslides.min.js"></script>

2. Include the CSS responsiveslides.css in the header of the page.

<link rel="stylesheet" href="path/to/responsiveslides.css">

3. Add the basic HTML to the page.

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

4. Initialize the plugin and we’re ready to go.

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

Plugin’s default options:

$(".rslides").responsiveSlides({
  auto: true,
  speed: 500,
  timeout: 4000,
  pager: false,
  nav: false,
  random: false,
  pause: false,
  pauseControls: true,
  prevText: "Previous",
  nextText: "Next",
  maxwidth: "",
  navContainer: "",
  manualControls: "",
  namespace: "rslides",
  before: function(){},
  after: function(){}
});