@lukeboyle/lazy-slider

LazyLoad Slider

View the demo site - http://3stacks.github.io/lazy-slider/

Importing the module

  // ES6
  import LazySlider from 'lazy-slider';

  // CommonJS 
  const LazySlider = require('lazy-slider');

API & Usage

const options = {
  // the slides' container element
  target: HTMLElement,
  
  // slide 1 is hard-coded in the page already
  slides: [
    'path/to/slide-2.html',
    'path/to/slide-3.html',
    'path/to/slide-4.html'
  ],
  
  // The class applied to each slide
  slideClass: 'ls-slide',
  
  animationClasses: {
    current:  'ls-current',
    next:     'ls-next',
    previous: 'ls-previous',
    entering: 'ls-entering',
    exiting:  'ls-exiting'
  },
  
  timings: {
    duration: 2000,
    transition: 500
  }
};

// init (call this when page has finished loading)
const slider1 = new lazySlider(options);

API

destroy()

Purpose

The destroy method will clear out all slides except for the initial one and set it to the current.

Usage

  slider1.destroy()

If you wish to use destroy in a timeout, ensure you bind the slider to the destroy this.

  setTimeout(slider1.destroy.bind(slider1), 1000);