Back to post

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:

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(){}
});
Property Default Type Description
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 auto generated 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 $.noop Function Before callback
after $.noop Function After callback

Default example

HTML structure

<ul class="default-rslides">
  <li><img src="path/to/demo-1.jpg" alt=""/></li>
  <li><img src="path/to/demo-2.jpg" alt=""/></li>
  <li><img src="path/to/demo-3.jpg" alt=""/></li>
</ul>

Script

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

Nav enabled

HTML structure

<div class="rslides-wrap">
  <ul class="nav-rslides">
    <li><img src="path/to/demo-1.jpg" alt=""/></li>
    <li><img src="path/to/demo-2.jpg" alt=""/></li>
    <li><img src="path/to/demo-3.jpg" alt=""/></li>
  </ul>
</div>

Script

$(function() {
  $(".nav-rslides").responsiveSlides({
     nav: true,
     "prevText": "",
     "nextText": ""
  });
});

CSS

.rslides-wrap{
  position: relative;
}

.rslides_nav{
  position: absolute;
  height: 50px;
  width: 50px;
  line-height: 50px;
  padding: 0 20px;
  background: #000;
  color: #FFF;
  left: 0;
  top: 50%;
  margin-top: -25px;
  z-index: 9;
}

.rslides_nav::after{
  position: absolute;
  width: 50px;
  height: 50px;
  font-size: 20px;
  font-family:FontAwesome;
  content: "\f104";
}

.rslides_nav.next{
  left: inherit;
  right: 0;
}

.rslides_nav.next::after{
  content: "\f105";
}

Pager Enabled

HTML structure

<div class="rslides-wrap">
  <ul class="pager-rslides">
    <li><img src="path/to/demo-1.jpg" alt=""/></li>
    <li><img src="path/to/demo-2.jpg" alt=""/></li>
    <li><img src="path/to/demo-3.jpg" alt=""/></li>
  </ul>
</div>

Script

$(function() {
  $(".pager-rslides").responsiveSlides({
    "pager": true
  });
});

CSS

.rslides-wrap{
  position: relative;
}

.rslides_tabs{
  position: absolute;
  background: rgba(0,0,0,0.6);
  padding: 15px;
  width: 100%;
  bottom: 0;
  left: 0;
  margin: 0;
  text-align: center;
  z-index: 9;
}

.rslides_tabs li{
  width: 10px;
  height: 10px;
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  margin: 0 3px;
  background: #FFF;
  color: #FFF;
  opacity: 0.5;
}

.rslides_tabs li.rslides_here{
  opacity: 1;
}