Splide

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

* Demo
* Documents

News

* Transform Splidejs to the organization.
* Add slideFocus and waitForTransition options.
* Add type definitions for typescript.
* 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:
``bash
$ npm install @trodolv/splide
`
1. Link to the stylesheet:
`html

`
1. Write HTML for building a slider:
`html



`
1. Initialize Splide. The selector accepts an ID, a class name or an Element itself:
`javascript
import Splide from '@trodolv/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

$3

Pass an object to the second argument of the Splide constructor:
`javascript
new Splide( '#splide', {
type : 'loop',
perPage: 3,
} );
`
Or set a data-splide attribute to a root element in a JSON format:
`html

``

$3

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.
* waitForTransition: Whether to prevent any actions while a slider is transitioning.
* 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. This is for a horizontal slider.
* autoHeight: If true, slide height will be determined by the element height itself. This is for a vertical slider.
* 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.
* slideFocus: Whether to add tabindex="0" to visible slides 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