Customizable Background Slider/Carousel In Pure JavaScript – gaBasicSlider

Category: Javascript , Slider | March 15, 2018
Author: gregartist
Views Total: 219
Official Page: Go to website
Last Update: March 15, 2018
License: MIT

Preview:

Customizable Background Slider/Carousel In Pure JavaScript – gaBasicSlider

Description:

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

Leave a Reply