/lory

Touch enabled minimalistic slider written in vanilla JavaScript.

Primary LanguageJavaScriptMIT LicenseMIT

Please visit: http://meandmax.github.io/lory/

Touch enabled minimalistic slider written in vanilla JavaScript.

license npm

build code climate devDependencies

Join the chat at https://gitter.im/meandmax/lory

Install with node

npm install --save lory.js

var lory = require('lory');

Install with bower

bower install lory --save

Local development

// To install dev dependencies run:

npm install -g grunt-cli
npm install

// To start the development server run:

grunt start

// To lint your code run:

grunt lint

// To make a full new build run:

grunt build

Run tests

// To install dev dependencies run:

npm install

// To start karma in chrome browser and run tests:

grunt karma

Prerequisited markup

<div class="slider js_simple simple">
    <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>
            <li class="js_slide">6</li>
        </ul>
    </div>
</div>

Prerequisited css

  .frame {
        position: relative;
        font-size: 0;
        line-height: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    .slides {
        display: inline-block;
    }

    li {
        position: relative;
        display: inline-block;
    }

Integration

    <script src="js/lory.min.js"></script>
    <script>
        'use strict';

        document.addEventListener('DOMContentLoaded', function() {
            var simple = document.querySelector('.js_simple');

            lory(simple, {
                // options going here
            });
        });
    </script>

Integration as a jQuery Plugin

    <script src="js/jquery.lory.min.js"></script>
    <script>
        'use strict';

        $(function() {
            $('.js_simple').lory({
                infinite: 1
            });
        });
    </script>

Integration of multiple sliders on one page

    <script src="js/lory.js"></script>
    <script>
        'use strict';

        document.addEventListener('DOMContentLoaded', function() {
            Array.prototype.slice.call(document.querySelectorAll('.js_slider')).forEach(function (element, index) {
                lory(element, {});
            });
        });
    </script>

Public API

prev: slides to the previous slide
next: slides to the next slide
slideTo: slides to the index given as an argument: (arguments: index {number})
returnIndex: returns the index of the current slide element
setup: Binds eventlisteners, merging default and user options, setup the slides based on DOM (called once during initialisation). Call setup if DOM or user options have changed or eventlisteners needs to be rebinded.
reset: sets the slider back to the starting position and resets the current index (called on Resize event)

Options

slidesToScroll slides scrolled at once default: 1
slideSpeed time in milliseconds for the animation of a valid slide attempt default: 300
rewindSpeed time in milliseconds for the animation of the rewind after the last slide default: 600
snapBackSpeed time for the snapBack of the slider if the slide attempt was not valid default: 200
ease cubic bezier easing functions: http://easings.net/de default: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)'
rewind if slider reached the last slide, with next click the slider goes back to the startindex. default: false

Callbacks

beforeInit: executed before initialisation (first in setup function)
afterInit: executed after initialisation (end of setup function)
beforePrev: executed on click of prev controls (prev function)
beforeNext: executed on click of next controls (next function)
beforeTouch: executed on touch attempt (touchstart)
beforeResize: executed on every resize event

Browser Support

  • Chrome
  • Safari
  • FireFox
  • Opera
  • Internet Explorer 10+

Copyright

Copyright © 2015 Maximilian Heinz, contributors. Released under the MIT, GPL licenses