Easy Horizontal Slider/Scroller In Vanilla JS – jScrolly

jScrolly is a standalone JavaScript plugin which enables you to smoothly transitioning between a group of images using CSS3 animations.

How to use it:

Installation.

# NPM
$ npm install jscrolly --save

Import the jscrolly library.

<script src="js/jScrolly.js"></script>

// or
import jScrolly from 'jScrolly';

Don’t forget to import the core stylesheet.

<link href="css/jScrolly.css" rel="stylesheet">

The basic HTML structure for the slider.

<div class="jScrolly">
  <div class="jContent">
    <div class="slider">
      <div class="slide">Slide One</div>
      <div class="slide">Slide Two</div>
      <div class="slide">Slide Three</div>
      <div class="slide">Slide Four</div>
      <div class="slide">Slide Five</div>
      ...
    </div>
  </div>
</div>

Initialize the jScrolly and done.

var mySlider = new jScrolly();

Default CSS selectors which can be used to style the slider & slider controls in the CSS.

var mySlider = new jScrolly({
    buttonsClass: 'jPanel',
    buttonPrevClass: 'prevBtn',
    buttonNextClass: 'nextBtn',
    buttonNeactiveClass: 'neactive',
    buttonPrevText: 'Previous',
    buttonNextText: 'Next',
});

Config the transition speed in milliseconds. Default: 400.

var mySlider = new jScrolly({
    transitionSpeed: '400'
});

Callback functions.

var mySlider = new jScrolly({
    onFirstSlide: null,
    onSlide: null
});

Move between the slides manually.

mySlider.moveNext();
mySlider.movePrev();

Destroy the instance.

mySlider.destroy();