Touch Enabled Content Slider in jQuery & Vanilla JavaScript - lory

lory is a Vanilla JavaScript library that makes it easier to create a touch-enabled content slider/scroller with arrows navigation. Also provides a jQuery plugin which allows you to implement a minimal slider in your jQuery projects.

Key features:

• Supports single element or multiple elements in one slide.
• Provides options to custom easing effects.
• Custom transition effects & animation speed.
• Carousel-like infinite looping.

How to use it:

1. Install and import the lory module.

# Yarn
$ yarn add lory.js

# NPM
$ npm install lory.js --save

import { lory } from 'lory.js';

2. To use the lory as a jQuery plugin, download and include the jquery.lory.js script after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script> 
<script src="dist/jquery.lory.js"></script> 

3. Add slides together with next & prev navigation arrows into the slider.

<div class="slider js_demo demo">
  <div class="frame js_frame">
    <ul class="slides js_slides">
      <li class="js_slide">Slide 1</li>
      <li class="js_slide">Slide 2</li>
      <li class="js_slide">Slide 3</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> 
</div>

4. Initialize the content slider with default options.

// JavaScript
document.addEventListener('DOMContentLoaded', function() {
  var mySlider = document.querySelector('.js_demo');
  lory(mySlider, {
    // options here
  });
});

// jQuery Plugin
$(function() {
  $('.js_demo').lory({
    // options here
  });
});

5. Available options.

/**
 * slides scrolled at once
 * @slidesToScroll {Number}
 */
slidesToScroll: 1,

/**
 * time in milliseconds for the animation of a valid slide attempt
 * @slideSpeed {Number}
 */
slideSpeed: 300,

/**
 * time in milliseconds for the animation of the rewind after the last slide
 * @rewindSpeed {Number}
 */
rewindSpeed: 600,

/**
 * time for the snapBack of the slider if the slide attempt was not valid
 * @snapBackSpeed {Number}
 */
snapBackSpeed: 200,

/**
 * Basic easing functions: https://developer.mozilla.org/de/docs/Web/CSS/transition-timing-function
 * cubic bezier easing functions: http://easings.net/de
 * @ease {String}
 */
ease: 'ease',

/**
 * if slider reached the last slide, with next click the slider goes back to the startindex.
 * use infinite or rewind, not both
 * @rewind {Boolean}
 */
rewind: false,

/**
 * number of visible slides or false
 * use infinite or rewind, not both
 * @infinite {number}
 */
infinite: false,

/**
 * the slide index to show when the slider is initialized.
 * @initialIndex {number}
 */
initialIndex: 0,

/**
 * class name for slider frame
 * @classNameFrame {string}
 */
classNameFrame: 'js_frame',

/**
 * class name for slides container
 * @classNameSlideContainer {string}
 */
classNameSlideContainer: 'js_slides',

/**
 * class name for slider prev control
 * @classNamePrevCtrl {string}
 */
classNamePrevCtrl: 'js_prev',

/**
 * class name for slider next control
 * @classNameNextCtrl {string}
 */
classNameNextCtrl: 'js_next',

/**
 * class name for current active slide
 * if emptyString then no class is set
 * @classNameActiveSlide {string}
 */
classNameActiveSlide: 'active',

/**
 * enables mouse events for swiping on desktop devices
 * @enableMouseEvents {boolean}
 */
enableMouseEvents: false,

/**
 * window instance
 * @window {object}
 */
window: typeof window !== 'undefined' ? window : null,

/**
 * If false, slides lory to the first slide on window resize.
 * @rewindOnResize {boolean}
 */
rewindOnResize: true

6. Event handlers.

var mySlider = $('.js_demo');

function handleEvent(e) {
  // custom function here
}

mySlider.on('before.lory.init', handleEvent);
mySlider.on('after.lory.init', handleEvent);
mySlider.on('before.lory.slide', handleEvent);
mySlider.on('after.lory.slide', handleEvent);
mySlider.on('before.lory.destroy', handleEvent);
mySlider.on('after.lory.destroy', handleEvent);

mySlider.on('on.lory.resize', handleEvent);
mySlider.on('on.lory.touchend', handleEvent);
mySlider.on('on.lory.touchmove', handleEvent);
mySlider.on('on.lory.touchstart', handleEvent);

7. API methods.

// slide to a specific slide
mySlider.data().lory.slideTo(2);

// go to the next slide
mySlider.data().lory.prev();

// back to the previous slide
mySlider.data().lory.next();

// reset the slider
mySlider.data().lory.reset();

// destroy the slider
mySlider.data().lory.destroy();

// return the index of the current slide
mySlider.data().lory.returnIndex();

// bind eventlisteners, merging default and user options, setup the slides based on DOM
mySlider.data().lory.setup();

Changelog:

2019-06-22

• Bug Fixes

2018-10-22

• fix: add option for rewind on prev button

---

This awesome jQuery plugin is developed by loryjs. For more Advanced Usages, please check the demo page or visit the official website.