Customizable Background Slider/Carousel In Pure JavaScript – gaBasicSlider

Category: Javascript , Slider | December 12, 2020
Views Total:357 views
Official Page:Go to website
Last Update:December 12, 2020


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>

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
// pauses auto rotation

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


v1.0.1 (12/12/2020)

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

You Might Be Interested In:

Leave a Reply