Author: | robiveli |
---|---|
Views Total: | 2,092 views |
Official Page: | Go to website |
Last Update: | November 6, 2018 |
License: | MIT |
Preview:

Description:
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();