Splide
Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
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.
Only the NPM way is explained in the following steps. Visit this page for other methods.
- Get the latest version by NPM:
$ npm install @splidejs/splide
- Link to the stylesheet:
<link rel="stylesheet" href="node_modules/@splidejs/splide/dist/css/splide.min.css">
- 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>
- 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.
- 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.
API and Extension
Splide provides some APIs and the way to customize the behaviour programmatically.
License
Splide is released under the MIT license.
© 2020 Naotoshi Fujita
