Basic Responsive Background Slider In Pure JavaScript - SimpleSlider

Demo Download

Author:	michu2k
Views Total:	2,836
Official Page:	Go to website
Last Update:	October 7, 2019
License:	MIT

Preview:

Basic Responsive Background Slider In Pure JavaScript – SimpleSlider

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: 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}
    }
});