oshit / lory

Touch enabled minimalistic slider written in vanilla JavaScript.

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

Touch enabled minimalistic slider written in vanilla JavaScript.

Install with node

npm install --save lory.js

var lory = require('lory.js');

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;

        // example width has to specified for the different views (media queries)
        width: 880px;
    }

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)
destroy	destroys the lory instance by removing all lory specific event listeners

Options

slidesToScroll	slides scrolled at once	default: 1
infinite	like carousel, works with multiple slides. (do not combine with rewind)	default: false (number of visible slides)
rewind	if slider reached the last slide, with next click the slider goes back to the startindex. (do not combine with infinite)	default: false
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: 'ease'
classNameFrame	class name for slider frame	default: 'js_frame'
classNameSlideContainer	class name for slides container	default: 'js_slides'
classNamePrevCtrl	class name for slider previous control	default: 'js_prev'
classNameNextCtrl	class name for slider next control	default: 'js_next'

Events

before.lory.init	fires before initialisation (first in setup function)
after.lory.init	fires after initialisation (end of setup function)
before.lory.slide	fires before slide change | arguments: currentSlide, nextSlide
after.lory.slide	fires after slide change | arguments: currentSlide
on.lory.resize	fires on every resize event
on.lory.touchstart	fires on every slider touchstart event
on.lory.touchmove	fires on every slider touchmove event
on.lory.touchend	fires on every slider touchend event
on.lory.destroy	fires when the slider instance gets destroyed

Browser Support

• Chrome
• Safari
• FireFox
• Opera
• Internet Explorer 10+
• Internet Explorer 9 (graceful, without transitions)

Copyright

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