Lightweight Responsive Slider in Javascript

The ResponsiveSlides.js is a most lightweight Javascript plugin to build a responsive slider in no time. The plugin file is just about 1KB that means no load on your website.

This is a tiny Javascript plugin that allows you to create a fully responsive photo slider using the elements inside a container. It works with most of the browsers including IE versions.

The slider also added the max-width for IE6 and other browsers which don’t have natively support it. This slider has two types of different modes.

Either it can automatically fade the images or operates with the help of pagination or navigation.

Features of Lightweight Slideshow

• Mobile friendly.
• 1kb minified and gzipped
• Added CSS3 transitions with the JavaScript fallback
• Simple markup using an unordered list
• Settings for transition and timeout durations
• define multiple slideshows.
• 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
• And many more.

How to Create a Responsive Slider

Add the following files into the header to get start it.

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

Next, define the HTML markup and include your own images.

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

Add the basic style and CSS3 animations.

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

Hook up the slideshow with Javascript

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

To customize, you have a lot of option to set true or false to make it as per your need of design.

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

Just to make sure, to style the slider caption and arrow, you need to take the style from the demo.css which you can find in the download source.

But in our live demo, we have included the style in responsiveslides.css to make one file for the slideshow.