Skip to content

Latest commit

 

History

History
145 lines (133 loc) · 6.26 KB

README.md

File metadata and controls

145 lines (133 loc) · 6.26 KB
Raw

Splide

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

News

  • 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.

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.
  • 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.
  • 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, update slide status(eg. "is-active" class) before transition.
  • 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.

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