Responsive Smooth Carousel In Vanilla JavaScript – JGB Slider

Category: Javascript , Slider | October 23, 2017
Author: gemmadlou
Views Total: 1,131 views
Official Page: Go to website
Last Update: October 23, 2017
License: MIT

Preview:

Responsive Smooth Carousel In Vanilla JavaScript – JGB Slider

Description:

The JGB Slider JavaScript library lets you create a responsive, customizable, smoothly animated carousel for any web contents.

Features:

  • Custom slider controls.
  • Infinite loop.
  • Event handlers.
  • Autoplay.

Install the JGB Slider with NPM:

# NPM
$ npm install jgb-slider --save

How to use it:

Import the JGB Slider into the project or include the UMB bundle inside the web page as follows:

<link href="dist/jgb-slider.css" rel="stylesheet">
<script src="dist/jgb-slider.js"></script>

The basic HTML structure for the slider.

<div class="js-slider">
  <ol class="js-slider__slider">
    <li class="js-slider__slide">
        <img src="https://placehold.it/1200x350" />
    </li>
    <li class="js-slider__slide">
        <img src="https://placehold.it/1200x350" />
    </li>
    <li class="js-slider__slide">
        <img src="https://placehold.it/1200x350" />
    </li>
    <li class="js-slider__slide">
        <img src="https://placehold.it/1200x350" />
    </li>
    <li class="js-slider__slide">
        <img src="https://placehold.it/1200x350" />
    </li>
  </ol>
</div>

Initialize the JBG Slider library and done.

var el = jgbslider();

Configuration options with default values.

var el = jgbslider({
    currentSlide: 1,
    numberOfSlides: 5,
    transitionTo: undefined,
    slideDuration: 1200,
    autoplay: false,
    autoplaySpeed: 4000,
    loopThrough: false,
    direction: undefined
});

API methods.

// Goto the next slide
el.next();

// Back to the previous slide
el.previous();

// Start autoplay
el.autoplay();

// Stop autoplay
el.stopAutoplay();

Event handlers.

var el = jgbslider({
    onInit: function onInit() {},
    beforeSlide: function beforeSlide() {},
    afterSlide: function afterSlide() {},
    onStartAutoplay: function onStartAutoplay() {},
    onStopAutoplay: function onStopAutoplay() {},
});

You Might Be Interested In:


Leave a Reply