- Transform Splidejs to the organization.
- Add type definitions for typescript.
- React Splide is released.
- Vue Splide is released.
- Breakpoints accept
- 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.
- 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
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:
- Write HTML for building a slider:Slide 01Slide 02Slide 03
- Initialize Splide. The selector accepts an ID, a class name or an Element itself:Note that only the first element will be initialized even if using a class name.;'#splide' ;
See the Integration section for your Vue or React project.
Pass an object to the second argument of the
'#splide'type : 'loop'perPage: 3;
Or set a
data-splide attribute to a root element in a JSON format:
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.
- 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.
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.
Splide is released under the MIT license. © 2020 Naotoshi Fujita