Basic Responsive Background Slider In Pure JavaScript – SimpleSlider

Preview:

Description:

SimpleSlider is a generic responsive slider/carousel plugin with JavaScript that has the ability to slides through any HTML contents at a certain speed.

How to use it:

Include the style sheet ‘simpleSlider.min.css’ in the head section, and the JavaScript file simpleSlider.min.js right before the closing body tag.

<link rel="stylesheet" href="dist/simpleSlider.min.css">
<script src="dist/simpleSlider.min.js"></script>

The html structure for the slider.

<div class="simple-slider simple-slider-demo">
  <div class="slider-wrapper">
    <div class="slider-slide" style="background-image: url('https://placehold.it/1200x400')">
      First slide
    </div>

    <div class="slider-slide" style="background-image: url('https://placehold.it/1200x400')">
      Second slide
    </div>

    <div class="slider-slide" style="background-image: url('https://placehold.it/1200x400')">
      Third slide
    </div>
  </div>

  <div class="slider-btn slider-btn-prev"></div>
    <div class="slider-btn slider-btn-next"></div>
</div>

Initialize the slider and done.

var slider = new simpleSlider('.simple-slider-demo');

Customize the transition duration in milliseconds.

var slider = new simpleSlider('.simple-slider-demo',{
    speed: 2000
});

Set the delay between transitions in milliseconds.

var slider = new simpleSlider('.simple-slider-demo',{
    delay: 6000
});

Enable/disable the autoplay functionality.

var slider = new simpleSlider('.simple-slider-demo',{
    autoplay: true
});

Default CSS classes.

var slider = new simpleSlider('.simple-slider-demo',{
    classes: {
      wrapper: 'slider-wrapper',    // wrapper class [string]
      slide: 'slider-slide',    // slide class [string]
      buttons: 'slider-btn'   // buttons class [string]
    }
});

Changelog:

v1.7.2 (09/08/2018)

• Various fixes