lory – A Touch-enabled minimalistic Vanilla JavaScript Slider

lory

Create a beautiful slider with a minimalistic and touch-enabled vanilla JavaScript library, named lory, behind. It’s compatible with all major browsers, including Internet Explorer 10+ and if you can live without transitions (on the respective browser only, of course) and with a classList Polyfill it will also be compatible with IE 9.

You can use lory as normal JavaScript library, as ES2015 module as well as commonJS module. And you can install it with NPM, Yarn or bower or you just use CDNJS:

https://cdnjs.com/libraries/lory.js/
Download the latest version of lory as .ZIP or as .TAR package!

npm i lory.js --save

yarn add lory.js --save

Instructions

Lory comes up with just a single JavaScript file, including also a own jQuery edition and both are also available as minified versions with an respective Source Map. The package itself contains no Stylesheet, but the demonstration pages offers you a small example, which shows all required styling class names.

 

Load lory

Your own styles for lory should be linked within the HTML header, the JavaScript can be located wherever you want, but we recommend to load it immediately after the started <body> tag.

<DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            <!-- Required Styles -->
        </style>
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/lory.js"></script>

        <!-- Prerequisited HTML Structure -->
        <div class="slider js_slider">
            <div class="frame js_frame">
                <ul class="slides js_slides">
                    <li class="js_slide">1</li>
                    <li class="js_slide">2</li>
                    <li class="js_slide">3</li>
                    <li class="js_slide">4</li>
                    <li class="js_slide">5</li>
                </ul>
            </div>
            <span class="js_prev prev">
                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z"/></g></svg>
            </span>
            <span class="js_next next">
                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z"/></g></svg>
            </span>
    </body>
</html>

 

Init lory

The styles, the script as well as the HTML structure are written / included, now we can lory send to work. To make sure, that everything is loaded before we loryfy everything, we write our single line of code within the “DOMContentLoaded” event aka. jQuery(document).ready() in jQuery.

document.addEventListener("DOMContentLoaded", function(){ 
    lory(document.querySelector(".js_slider"));
});

 

Configure lory

Everything is loryfied, but some behavior is still missing? No Problem, lory offers some useful options:

lory(document.querySelector(".js_slider"), {
    slidesToScroll:             1,
    enableMouseEvents:          false,
    infinite:                   false,
    rewind:                     false,
    slideSpeed:                 300,
    rewindSpeed:                600,
    snapBackSpeed:              200,
    initialIndex:               0,
    ease:                       "ease",
    classNameFrame:             "js_frame",
    classNameSlideContainer:    "js_slides",
    classNamePrevCtrl:          "js_prev",
    classNameNextCtrl:          "js_next"
});

 

Configure: Options

slidesToScroll
slides scrolled at once
enableMouseEvents
enabled mouse events
infinite
like carousel, works with multiple slides. (do not combine with rewind)
rewind
if slider reached the last slide, with next click the slider goes back to the startindex. (do not combine with infinite)
slideSpeed
time in milliseconds for the animation of a valid slide attempt
rewindSpeed
time in milliseconds for the animation of the rewind after the last slide
snapBackSpeed
time for the snapBack of the slider if the slide attempt was not valid
initialIndex
the slide index to show when the slider is initialized
ease
cubic bezier easing functions: http://easings.net
classNameFrame
class name for slider frame
classNameSlideContainer
class name for slides container
classNamePrevCtrl
class name for slider previous control
classNameNextCtrl
class name for slider next control

One thought on “lory – A Touch-enabled minimalistic Vanilla JavaScript Slider

Leave a Reply

Top