Easy Horizontal Slider/Scroller In Vanilla JS – jScrolly

Category: Javascript , Slider | November 6, 2018
Author: robiveli
Views Total: 1,630 views
Official Page: Go to website
Last Update: November 6, 2018
License: MIT


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:


$ 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>

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.



Destroy the instance.


You Might Be Interested In:

Leave a Reply