**[Splide](https://splidejs.com/) is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.**
* [Demo](https://splidejs.com/)
* [Documents](https://splidejs.com/category/users-guide/)
## News
* Transform Splidejs to the organization.
* Add `slideFocus` and `waitForTransition` options.
* Add [type definitions](https://github.com/Splidejs/splide/blob/master/src/js/splide.d.ts) for typescript.
* [React Splide](https://splidejs.com/integration-react-splide/) is released.
* [Vue Splide](https://splidejs.com/integration-vue-splide/) is released.
* Add `resetProgress` and `throttle` options.
* Breakpoints accept `drag` and `pagination`.
* Add some [themes](https://splidejs.com/themes/).
* [Grid](https://splidejs.com/extension-grid/) extension is released.
* [Auto Width](https://splidejs.com/auto-width/) is implemented. Each slide can have its own width.
* [Breakpoints](https://splidejs.com/options/#breakpoints) accept 'destroy' option.
* Merge Slides component to Elements.
* Splide can be destroyed.
* Add or remove slides dynamically.
* [Video](https://splidejs.com/extension-video/) extension is released.
* [URL Hash Navigation](https://splidejs.com/extension-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](https://splidejs.com/getting-started/) for other methods.
1. Get the latest version by NPM:
```bash
$ npm install @splidejs/splide
```
1. Link to the stylesheet:
```html
```
1. Write HTML for building a slider:
```html
Slide 01
Slide 02
Slide 03
```
1. Initialize Splide. The selector accepts an ID, a class name or an Element itself:
```javascript
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](#integration) section for your Vue or React project.
## Options
### Changing Options
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
```
### Available Options
Here is a list of options and brief explanations. Visit [this page](https://splidejs.com/options/) 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](https://splidejs.com/extension-video/): Assign HTML video, YouTube or Vimeo to slides.
* [URL Hash Navigation](https://splidejs.com/extension-url-hash-navigation/): Listen to hash change and move a slider to a slide having the hash data attribute.
* [Grid](https://splidejs.com/extension-grid/): Create rows and cols in a slider.
## Integration
