Press "Enter" to skip to content

Lightweight and Powerful Responsive Carousel Slider Javascript Plugin | Splide

Carousel Slider JavaScript – Splide is a lightweight, robust, and flexible carousel scroll bar and rack, written in pure JavaScript without any dependencies. This Slider is a responsive, accessible, mobile-friendly, full-featured slider/carousel plugin applied in pure JavaScript and CSS/CSS3.

More options:

  • Pure JavaScript without any dependencies
  • Small size, less than 29 KB (11 KB compressed)
  • Flexible and extensible
  • Multiple slides
  • CSS Transition Fade or Fade
  • Responsive and supportive stopping points
  • Acceptance of relative CSS units, such as VW,%, rem, etc.
  • No need to crop images
  • Autoplay with a progress bar and play/pause buttons
  • Right-to-Left and vertical direction
  • Mouse drag and touch swipe
  • Interlaced scroll bar
  • Lazy load
  • Thumbnail slider
  • Ease of access, support for keyboard control and ARIA themes
  • Dynamically add/remove slides
  • Internet Explorer 10

Basic utilization:

Install and import the Splide library.

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

# Video Extension
$ npm install @splidejs/splide-extension-video --save

# URL Hash Change Extension
$ npm install @splidejs/splide-extension-url-hash --save
// Core
import splide from '@splidejs/splide';

// Video Extension
import Video from '@splidejs/splide-extension-video';

// URL Hash Change Extension
import URLHash from '@splidejs/splide-extension-url-hash';

Alternatively, you’ll be able to immediately load the required JavaScript and CSS records data within the doc.

  
   

Insert any content material as slides to the slider.

  • Slide 01
  • Slide 02
  • Slide 03
  • Slide 04
  • Slide 05
  • Slide 1
  • Slide 2
  • Slide 3

You would possibly want a progress bar on the Autoplay mode that signifies the time to attend earlier than transitioning to the subsequent slide.

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

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

Create a video carousel utilizing the Video extension.

new Splide( '#splide', {
    video: {
      // options here
    },
}).mount(window.splide.Extensions);

Enable the URL hash change extension.

new Splide( '#splide' ).mount(window.splide.Extensions);

Possible choices for the video extension.

new Splide( '.splide' , {
    video: {
      /**
       * Whether to play the video automatically.
       *
       * @type {boolean}
       */
      autoplay: false,

      /**
       * Hide the video control UI.
       *
       * @type {boolean}
       */
      hideControls: false,

      /**
       * Hide full screen button.
       * Only for YouTube.
       *
       * @type {boolean}
       */
      disableFullScreen: false,

      /**
       * Loop the video.
       *
       * @type {boolean}
       */
      loop: false,

      /**
       * Mute the video.
       *
       * @type {boolean}
       */
      mute: false,

      /**
       * Default volume(0.0-1.0).
       *
       * @type {number}
       */
      volume: 0.2
  }
})

You can even go the choices through HTML information attributes as follows:

Event listeners.

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( 'click', 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
});

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

instance.on( 'video:paused', function (player) {
  // do something
});

instance.on( 'video:ended', function (player) {
  // do something
});

Properties.

// root element
splide.root

// zero-based active index
splide.index

// options
splide.options

// the number of slides
splide.length

// a collection of CSS classes
splide.classes

// i18n
splide.i18n

// an object containing all components
splide.Components

// set/get state
// CREATED = 1: Splide instance has just been created.
// MOUNTED = 2: All components have been mounted.
// IDLE = 3: Idling.
// MOVING = 4: The slider is moving.
splide.State.is( 4 )
splide.State.set( 2 )

API strategies.

// go to a specific slide
// {number}: Go to slide specified by {number}.
// '+','+{number}': Increase active slide index.
// '-','-{number}': Decrease active slide index.
// '>','>{number}': Go to next page or the page specified by {number}. For example, '>2' moves a slider to page 2.
// '<','<{number}': Go to previous page or the page specified by {number}.
splide.go(0);

// check the slider type
// SLIDE = 'slide'
// LOOP = 'loop'
// FADE = 'fade'
splide.is( 'loop' );

// register a Splide instance for sync
// must be called before mount().
splide.sync( splide );

// add a new slide
splide.add( slide, index );

// remove a slide
splide.remove( index );

// refresh the slider
splide.refresh();

// destroy the slider
splide.destroy();

Full-featured Slider & Carousel Plugin, Custom Carousel Slider CSS, Carousel Slider Plugin

Changelog:

v2.4.12 (08/24/2020)

  • Fixed: Autoplay was not correctly resumed on blur.

v2.4.11 (08/17/2020)

  • Fixed: The observe place was flawed in RTL mode.
  • Fixed the invalid CSS property title.

v2.4.10 (07/30/2020)

  • Fixed: Relative models(em, rem, and so forth) for the mountedWidth/fixedHeight choice didn’t work.

v2.4.8 (07/26/2020)

  • Bug Fix: mount() was known as twice when destroy() and mount() have been known as manually, due to the breakpoint element.

v2.4.8 (07/17/2020)

  • The Lazyload element accepts a srcset attribute

v2.4.6 (07/14/2020)

  • Fixed Padding grew to become undefined when the Splide occasion was transformed to JSON by JSON.stringify.
  • Fixed Padding and hole weren't up to date appropriately on resize in the event that they have been described by % or vw.

v2.4.4 (06/23/2020)

  • Bugfix: Drag/swipe didn’t work appropriately.
  • Bugfix: Transition animation was skipped solely within the first web page of a RTL slider.

v2.4.3 (06/21/2020)

  • Can choose the goal of the keyboard occasion from the doc or the foundation component.
  • Can take away tab indices from slides by slideFocus choice.
  • Can decide whether or not to stop any actions whereas transitioning or not by the waitForTransition choice.
  • Change the way in which of the Layout calculation.
  • Merge the horizontal and vertical sub parts into the Track element.

v2.4.1 (06/20/2020)

  • Optimization. Remove horizontal and vertical instructions of the Track element.

v2.4.0 (06/17/2020)

  • Support drag for the fade sort.

v2.3.8 (06/05/2020)

  • The variety of clones may be decided by choices.
  • Fixed: Loop didn’t work effectively when mountedWidth is supplied and variety of slides will not be sufficient to fill the view port.

v2.3.6 (05/31/2020)

  • Fixed: invalid actualIndex was assigned to a slide when the size of slides have been lower than perPage.
  • Emit click on occasion when a slide is clicked.
  • All parts can be evaluated once more when the Splide is remounted.

v2.3.5 (05/29/2020)

  • Bug Fix: Invalid actualIndex was assigned to a slide when the size of slides have been lower than perPage.

v2.3.2 (05/28/2020)

  • Bug Fix: perMove didn’t work correctly with autoplay

v2.3.1 (05/21/2020)

  • Bug Fix: The “is-active” class was not inserted the energetic slide when the updateOnMove choice was true

v2.2.7 (05/17/2020)

  • Breakpoints help “drag” and “pagination”.
  • Throttle length for the resize occasion may be modified via choices.

v2.2.7 (05/05/2020)

  • Bug Fix: Slide width was flawed when the window scrollbar was made hidden by the Layout element.

v2.2.6 (05/04/2020)

  • Resolve a battle with prototype.js.

See Demo And Download

Official Website(Splidejs): Click Here

This superior jQuery/javascript plugin is developed by Splidejs. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *