Splide

Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.

• Demo
• Documents

News

• React Splide is released.
• Vue Splide is released.
• Add 'resetProgress' and 'throttle' options.
• Breakpoints accept 'drag' and 'pagination'.
• Add some themes.
• Grid extension is released.
• Auto Width is implemented. Each slide can have its own width.
• Breakpoints accept 'destroy' option.
• Merge Slides component to Elements.
• Splide can be destroyed.
• Add or remove slides dynamically.
• Video extension is released.
• URL Hash Navigation extension is released.

Features

• Pure JavaScript without any dependencies
• Small size, less than 29kB(11kB gzipped)
• Flexible and extensible
• Multiple slides
• Slide or fade transition by CSS
• Responsive, supporting breakpoints
• Accepting CSS relative units, such as vw, %, rem, etc
• No need to crop images
• Autoplay with progress bar and play/pause buttons
• "Right to left" and vertical direction
• Mouse drag and touch swipe
• Nested slider
• Lazy loading
• Thumbnail slider
• Accessibility friendly, supporting keyboard control and ARIA attributes
• Dynamically adding/removing slides
• Internet Explorer 10

Installation

There are 3 ways to install the Splide on your site.

• NPM
• Download
• CDN

Only the NPM way is explained in the following steps. Visit this page for other methods.

1. Get the latest version by NPM:

   $ npm install @splidejs/splide

2. Link to the stylesheet:

   <link rel="stylesheet" href="node_modules/@splidejs/splide/dist/css/splide.min.css">

3. Write HTML for building a slider:

   <div id="splide" 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>
       </ul>
     </div>
   </div>

4. Initialize Splide. The selector accepts an ID, a class name or an Element itself:

   import Splide from '@splidejs/splide';
   new Splide( '#splide' ).mount();

   Note that only the first element will be initialized even if using a class name.

See the Integration section for your Vue or React project.

Options

Changing Options

Pass an object to the second argument of the Splide constructor:

new Splide( '#splide', {
  type   : 'loop',
  perPage: 3,
} );

Or set a data-splide` attribute to a root element in a JSON format:

<div id="splide" class="splide" data-splide='{"type":"loop","perPage":3}'>
</div>

Available Options

Here is a list of options and brief explanations. Visit this page for more details.

• type: Determine a slider type.
• rewind: Whether to rewind a slider before the first slide or after the last one.
• speed: Transition speed in milliseconds.
• rewindSpeed: Transition speed on rewind in milliseconds.
• width: Define slider max width.
• height: Define slider height.
• fixedWidth: Fix width of slides.
• fixedHeight: Fix height of slides.
• heightRatio: Determine height of slides by ratio to a slider width.
• autoWidth: If true, slide width will be determined by the element width itself.
• perPage: Determine how many slides should be displayed per page.
• perMove: Determine how many slides should be moved when a slider goes to next or previous page.
• clones: Manually determine how many clones should be generated on one side.
• start: Start index.
• focus: Determine which slide should be focused.
• gap: Gap between slides.
• padding: Set padding-left/right in horizontal mode or padding-top/bottom in vertical one.
• easing: Animation timing function for CSS transition.
• arrows: Whether to append arrows.
• arrowPath: Change the arrow SVG path.
• pagination: Whether to append pagination(indicator dots).
• autoplay: Whether to enable autoplay.
• interval: Autoplay interval in milliseconds.
• pauseOnHover: Whether to stop autoplay while a slider is hovered.
• pauseOnFocus: Whether to stop autoplay while a slider elements are focused.
• resetProgress: Whether to reset progress of the autoplay timer when resumed.
• lazyLoad: Enable lazy load for images.
• preloadPages: Determine how many pages around an active slide should be loaded beforehand. This only works the lazyLoad option is “nearby”.
• keyboard: Whether to control a slider via keyboard.
• drag: Whether to allow mouse drag and touch swipe.
• dragAngleThreshold: The angle threshold for drag.
• swipeDistanceThreshold: Distance threshold for determining if the action is "flick" or "swipe".
• flickVelocityThreshold: Velocity threshold for determining if the action is "flick" or "swipe".
• flickPower: Determine power of flick. The larger number this is, the farther a slider runs by flick.
• flickMaxPages: Limit a number of pages to move by flick.
• direction: Slider direction.
• cover: Whether to convert an img src to background-image of its parent element. height, fixedHeight or heightRatio is required.
• accessibility: Whether to enable accessibility(ARIA attributes) or not.
• isNavigation: Determine if a slider is navigation for another.
• trimSpace: Whether to trim spaces before the fist slide or after the last one.
• updateOnMove: If true, "is-active" class added to the slide element before transition.
• throttle: Throttle duration for the resize event.
• breakpoints: Breakpoints definitions.
• classes: Collection of class names.
• i18n: Collection of texts for i18n.

Extensions

• Video: Assign HTML video, YouTube or Vimeo to slides.
• URL Hash Navigation: Listen to hash change and move a slider to a slide having the hash data attribute.
• Grid: Create rows and cols in a slider.

Integration

Easy to integrate the Splide slider or carousel into your Vue or React project.

• Vue Splide
• React Splide

API and Extension

Splide provides some APIs and the way to customize the behaviour programmatically.

• APIs
• Extension

License

Splide is released under the MIT license. © 2020 Naotoshi Fujita