Basic Responsive Background Slider In Pure JavaScript – SimpleSlider

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="/?originalUrl=https%3A%2F%2Fwww.cssscript.com%2Fdist%2FsimpleSlider.min.css">
<script src="/?originalUrl=https%3A%2F%2Fwww.cssscript.com%2Fdist%2FsimpleSlider.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: 6000
});

Set the delay between transitions in milliseconds.

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

Enable/disable the autoplay functionality.

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

Enable/disable infinite loop.

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

Specify the number of slides per view.

var slider = new simpleSlider('.simple-slider-demo',{
    slidesPerView: {
      768: 2, // 2 slides for viewport >= 768px
      1024: 3 // 3 slides for viewport >= 1024px
    }
});

Callback functions.

var slider = new simpleSlider('.simple-slider-demo',{
    // called after initialization
    onInit: () => {}, 
    // called after slide change
    onChange: () => {} 
    
});

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}
      pagination: 'slider-pagination', // pagination class {string}
      paginationItem: 'pagination-bullet', // pagination bullet class {string}
    }
});

Changelog:

v1.9.0 (10/07/2019)

• Fixed pagination in IE

v1.8.0 (05/03/2019)

• Added new option: enableDrag
• Added new option: slidesPerView
• Added new option: onChange
• Added new page with several demos
• Changed default speed to 600
• Changed default delay to 5000
• Changed bullet active class to the ‘is-active’
• Various tweaks and fixes

v1.7.2 (09/08/2018)

• Various fixes