JS Library For Touch Enabled Minimal Content Slider - lory

JS Library For Touch Enabled Minimal Content Slider - lory
File Size: 349 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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. Download and include the jquery.lory.js script after jQuery library.

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

2. Download and include the jquery.lory.js script after jQuery library.

<script src="//code.jquery.com/jquery-1.11.2.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.

'use strict';

$(function() {
  $('.js_demo').lory({
    infinite: 1
  });
});

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 visibile slides or false
 * use infinite or rewind, not both
 * @type {number}
 */
infinite: false,

// available callbacks

beforeInit: function () {
    return true;
},

afterInit: function () {
    return true;
},

beforePrev: function () {
    return true;
},

beforeNext: function () {
    return true;
},

beforeMove: function () {
    return true;
},

beforeResize: function () {
    return true;
}

Changelog:

2018-10-22

  • fix: add option for rewind on prev button

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