Full-featured Slider/Carousel Plugin – Splide

Preview:

Description:

Splide is a lightweight, responsive, accessible, mobile-friendly, full-featured slider/carousel plugin implemented in pure JavaScript and CSS/CSS3.

More features:

• Touch-enabled. Supports both touch swipe and mouse drag.
• Smooth slide & fade transitions based on CSS3.
• Image lazy loading.
• Supports nested sliders.
• Allows multiple items on a slide.
• Autoplay.
• RTL mode.
• Horizontal and vertical directions.

Basic usage:

Install and import the Splide library.

# NPM
$ npm install @splidejs/splide --save

import splide from '@splidejs/splide';

Alternatively, you can directly load the necessary JavaScript and CSS files in the document.

<link rel="stylesheet" href="dist/css/splide.min.css">
<script src="dist/js/splide.min.js"></script>

Insert any content as slides to the slider.

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
      <li class="splide__slide">Slide 04</li>
      <li class="splide__slide">Slide 05</li>
    </ul>
  </div>
</div>

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <div class="splide__slide__container">
          <img src="1.jpg">
        </div>
        Slide 1
      </li>
      <li class="splide__slide">
        <div class="splide__slide__container">
          <img src="2.jpg">
        </div>
        Slide 2
      </li>
      <li class="splide__slide">
        <div class="splide__slide__container">
          <img src="3.jpg">
        </div>
        Slide 3
      </li>
    </ul>
  </div>
</div>

You might need a progress bar on the Autoplay mode that indicates the time to wait before transitioning to the next slide.

<div class="splide__progress">
  <div class="splide__progress__bar">
  </div>
</div>

Invoke the slider plugin with default options. That’s it.

new Splide( '.splide' ).mount();

All possible plugin options to customize the slider.

new Splide( '.splide' , {
    /**
    * Determine a slider type.
    * - 'slide': Regular slider.
    * - 'loop' : Carousel slider.
    * - 'fade' : Change slides with fade transition. perPage, drag options are ignored.
    *
    * @type {string}
    */
    type: 'slide',

    /**
    * Whether to rewind a slider before the first slide or after the last one.
    * In "loop" mode, this option is ignored.
    *
    * @type {boolean}
    */
    rewind: false,

    /**
    * Transition speed in milliseconds.
    *
    * @type {number}
    */
    speed: 400,

    /**
    * Define slider max width.
    *
    * @type {number}
    */
    width: 0,

    /**
    * Define slider height.
    *
    * @type {number}
    */
    height: 0,

    /**
    * Fix width of slides. CSS format is allowed such as 10em, 80% or 80vw.
    * perPage number will be ignored when this option is falsy.
    *
    * @type {number|string}
    */
    fixedWidth: 0,

    /**
    * Fix height of slides. CSS format is allowed such as 10em, 80vh but % unit is not accepted.
    * heightRatio option will be ignored when this option is falsy.
    *
    * @type {number}
    */
    fixedHeight: 0,

    /**
    * Determine height of slides by ratio to a slider width.
    * This will be ignored when the fixedHeight is provided.
    *
    * @type {number}
    */
    heightRatio: 0,

    /**
    * Determine how many slides should be displayed per page.
    *
    * @type {number}
    */
    perPage: 1,

    /**
    * Determine how many slides should be moved when a slider goes to next or perv.
    *
    * @type {number}
    */
    perMove: 0,

    /**
    * Start index.
    *
    * @type {number}
    */
    start: 0,

    /**
    * Determine which slide should be focused if there are multiple slides in a page.
    * A string "center" is acceptable for centering slides.
    *
    * @type {boolean|number|string}
    */
    focus: false,

    /**
    * Gap between slides. CSS format is allowed such as 1em.
    *
    * @type {number|string}
    */
    gap: 0,

    /**
    * Set padding-left/right in horizontal mode or padding-top/bottom in vertical one.
    * Give a single value to set a same size for both sides or
    * do an object for different sizes.
    * Also, CSS format is allowed such as 1em.
    *
    * @example
    * - 10: Number
    * - '1em': CSS format.
    * - { left: 0, right: 20 }: Object for different sizes in horizontal mode.
    * - { top: 0, bottom: 20 }: Object for different sizes in vertical mode.
    *
    * @type {number|string|Object}
    */
    padding: 0,

    /**
    * Whether to append arrows.
    *
    * @type {boolean}
    */
    arrows: true,

    /**
    * Change the arrow SVG path like 'm7.61 0.807-2.12...'.
    *
    * @type {string}
    */
    arrowPath: '',

    /**
    * Whether to append pagination(indicator dots) or not.
    *
    * @type {boolean}
    */
    pagination: true,

    /**
    * Activate autoplay.
    *
    * @type {boolean}
    */
    autoplay: false,

    /**
    * Autoplay interval in milliseconds.
    *
    * @type {number}
    */
    interval: 5000,

    /**
    * Whether to stop autoplay when a slider is hovered.
    *
    * @type {boolean}
    */
    pauseOnHover: true,

    /**
    * Whether to stop autoplay when a slider elements are focused.
    * True is recommended for accessibility.
    *
    * @type {boolean}
    */
    pauseOnFocus: true,

    /**
    * Loading images lazily.
    * Image src must be provided by a data-splide-src attribute.
    *
    * - false: Do nothing.
    * - 'nearby': Only images around an active slide will be loaded.
    * - 'sequential': All images will be sequentially loaded.
    *
    * @type {boolean|string}
    */
    lazyLoad: false,

    /**
    * This option works only when a lazyLoad option is "nearby".
    * Determine how many pages(not slides) around an active slide should be loaded beforehand.
    *
    * @type {number}
    */
    preloadPages: 1,

    /**
    * Easing for CSS transition. For example, linear, ease or cubic-bezier().
    *
    * @type {string}
    */
    easing: 'cubic-bezier(.42,.65,.27,.99)',

    /**
    * Whether to control a slide via keyboard.
    *
    * @type {boolean}
    */
    keyboard: true,

    /**
    * Whether to allow mouse drag and touch swipe.
    *
    * @type {boolean}
    */
    drag: true,

    /**
    * Threshold for determining if the action is "flick" or "swipe".
    * Around 0.5 is recommended.
    *
    * @type {number}
    */
    flickThreshold: .6,

    /**
    * Determine power of flick. The larger number this is, the farther a slider runs by flick.
    * Around 500 is recommended.
    *
    * @type {number}
    */
    flickPower: 600,

    /**
    * Limit a number of pages to move by flick.
    *
    * @type {number}
    */
    flickMaxPages: 1,

    /**
    * Slider direction.
    * - 'ltr': Left to right.
    * - 'rtl': Right to left.
    * - 'ttb': Top to bottom.
    *
    * @type {string}
    */
    direction: 'ltr',

    /**
    * Set img src to background-image of its parent element.
    * Images with various sizes can be displayed as same dimension without cropping work.
    * fixedHeight or heightRatio is required.
    *
    * @type {boolean}
    */
    cover: false,

    /**
    * Whether to enable accessibility(aria and screen reader texts) or not.
    *
    * @type {boolean}
    */
    accessibility: true,

    /**
    * Determine if a slider is navigation for another.
    * Use "sync" API to synchronize two sliders.
    *
    * @type {boolean}
    */
    isNavigation: false,

    /**
    * Whether to trim spaces before the fist slide or after the last one when "focus" is not 0.
    *
    * @type {boolean}
    */
    trimSpace: true,

    /**
    * Breakpoints definitions.
    *
    * @example
    * {
    *   '1000': {
    *     perPage: 3,
    *     gap: 20
    *   },
    *   '600': {
    *     perPage: 1,
    *     gap: 5,
    *   }
    * }
    *
    * @type {boolean|Object}
    */
    breakpoints: false,

    /**
    * Collection of class names.
    *
    * @see ./classes.js
    *
    * @type {Object}
    */
    classes: {},

    /**
    * Collection of i18n texts.
    *
    * @see ./i18n.js
    *
    * @type {Object}
    */
    i18n: {}
}).mount();

Event listeners.

instance.on( 'mounted', function () {
  // do something
});

instance.on( 'mounted', function () {
  // do something
});

instance.on( 'updated', function (OPTIONS) {
  // do something
});

instance.on( 'move', function (newIndex, oldIndex, destIndex) {
  // do something
});

instance.on( 'moved', function (newIndex, oldIndex, destIndex) {
  // do something
});

instance.on( 'drag', function (info) {
  // do something
});

instance.on( 'dragged', function (info) {
  // do something
});

instance.on( 'visible', function (slideObject) {
  // do something
});

instance.on( 'hidden', function (slideObject) {
  // do something
});

instance.on( 'active', function (slideObject) {
  // do something
});

instance.on( 'inactive', function (slideObject) {
  // do something
});

instance.on( 'arrows:mounted', function (prev, next) {
  // do something
});

instance.on( 'arrows:updated', function (prev, next, prevIndex, nextIndex) {
  // do something
});

instance.on( 'pagination:mounted', function (data, activeItem:) {
  // do something
});

instance.on( 'pagination:updated', function (data, prevItem, nextItem) {
  // do something
});

instance.on( 'navigation:mounted', function (Splide) {
  // do something
});

instance.on( 'autoplay:play', function () {
  // do something
});

instance.on( 'autoplay:pause', function () {
  // do something
});

instance.on( 'autoplay:playing', function () {
  // do something
});

instance.on( 'lazyload:loaded', function () {
  // do something
});