Touch Enabled Content Slider in jQuery & Vanilla JavaScript - lory

File Size: 349 KB
Views Total: 10467
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 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="//"></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>
  <span class="js_prev prev">
    <svg xmlns="" width="50" height="50" viewBox="0 0 501.5 501.5">
        <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"/>
    </svg> </span> <span class="js_next next"> <svg xmlns="" width="50" height="50" viewBox="0 0 501.5 501.5">
        <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"/>

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() {
    // 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:
 * cubic bezier easing functions:
 * @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;

// go to the next slide;

// back to the previous slide;

// reset the slider;

// destroy the slider;

// return the index of the current slide;

// bind eventlisteners, merging default and user options, setup the slides based on DOM;



  • Bug Fixes


  • 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.