jScrolly

simple dependency-free javascript carousel slider plugin

Install

npm install jscrolly

Usage

Include script:

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

import jScrolly from 'jScrolly';

Include styling for buttons (optionally, style it as you wish):

<link href='jScrolly.css' rel='stylesheet' type='text/css'>

@import 'jScrolly';

Initial required structure, place any content you want within the items:

<div class="jScrolly">
    <div class="jContent">
        <div class="slider">
        	<div></div>
        	<div></div>
        	<div></div>
        	<div></div>
        </div>
    </div>
</div>

Finally, initialize jScrolly:

<script>
    var myScroller = new jScrolly();
</script>

Demo

Demo available here.

Options

jScrolly can take an optional parameters - an object of key/value settings:

$transitionSpeed String (default:400ms) - speed of previous and next transitions (in milliseconds)
buttonsClass String (default:jPanel) - css class for buttons container
buttonPrevClass String (default:prevBtn) - css class for previos button
buttonNextClass String (default:nextBtn) - css class for next button
buttonNeactiveClass String (default:neactive) - css class for neactive button
buttonPrevText String (default:Previous) - text for for previos button
buttonNextText String (default:Next) - text for for next button
onFirstSlide Function (default:null) - runs only once on first slide change
onSlide Function (default:null) - runs at slide change

Example

<script>
    var myScroller = new jScrolly({

        onFirstSlide: function() {
            console.log('On first slide change');
        },

        onSlide: function() {
            console.log('On every slide change');
        }

    });
</script>

Default css settings are placed in /sass/library/_variables.scss:

$baseColor (default:#3A3A3A) - main color for buttons
$btnSize (default:60) - size of buttons in rem unit

API

moveNext() - slide to next slide

movePrev() - slide to prev slide

destroy() - destroys the current instance of jScrolly

Browser support

It works in every modern browser where classList is supported.

Consider using polyfill classList feature if needed.

License

jScrolly is licensed under the MIT license.

robiveli/jscrolly