Customizable Background Slider/Carousel In Pure JavaScript – gaBasicSlider

gaBasicSlider is a lightweight, responsive, customizable touch-enabled slider plugin that allows you to infinitely slides through a group of background images with a subtle parallax effect as you seen in the demo.

Note: This is the pure JavaScript version of the jQuery gaBasicSlider plugin.

How to use it:

The basic HTML structure for the background slider (can be div or ul structures ).

<ul id="mySlider" class="my-slider">
  <li style="background-image: url('1.jpg')">One</li>
  <li style="background-image: url('2.jpg')">Two</li>
  <li style="background-image: url('3.jpg')">Three</li>
  <li style="background-image: url('4.jpg')">Four</li>
  ...
</ul>

Create custom navigation & pagination controls (OPTIONAL).

<button id="myPrevious">&larr;</button>
<button id="myNext">&rarr;</button>
<div id="myIndicators"></div>

Place the gaBasicSlider’s JavaScript file at the end of the document.

<script src="js/ga-basic-slider-min.js"></script>

Activate the background slider.

var params = {
    slider: document.getElementById('mySlider'),
    btnNext: document.getElementById('myNext'),
    btnPrevious: document.getElementById('myPrevious'),
    indicators: document.getElementById('myIndicators')
};
mySlider = new gaBasicSlider(params);

More configuration options.

var params = {
    animate: true,
    animationDelay: 6000, // milliseconds
    animationDuration: 500 // milliseconds
};

API methods.

// starts auto rotation
mySlider.start()
// pauses auto rotation
mySlider.stop()

Event handlers.

mySlider.addEventListener('initiated', function (e) {
  // do something
}, false);
mySlider.addEventListener('start', function (e) {
  // do something
}, false);
mySlider.addEventListener('stop', function (e) {
  // do something
}, false);

Changelog:

v1.0.1 (12/12/2020)

• Events are dispatched when the slider is initiated, started, and stoped.