Lightweight and Powerful Responsive Carousel Slider Javascript Plugin | Splide

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

This Slider is a responsive, accessible, mobile-friendly, full-featured slider/carousel plugin applied in pure JavaScript and CSS/CSS3.

More options:

  • Pure JavaScript without any dependencies
  • Small size, less than 29 KB (11 KB compressed)
  • Flexible and extensible
  • Multiple slides
  • CSS Transition Fade or Fade
  • Responsive and supportive stopping points
  • Acceptance of relative CSS units, such as VW,%, rem, etc.
  • No need to crop images
  • Autoplay with a progress bar and play/pause buttons
  • Right-to-Left and vertical direction
  • Mouse drag and touch swipe
  • Interlaced scroll bar
  • Lazy load
  • Thumbnail slider
  • Ease of access, support for keyboard control, and ARIA themes
  • Dynamically add/remove slides
  • Internet Explorer 10

Read More – 🌌 3d Space Image Carousel Slider Javascript With Nuxt

How to make use of it:


$ npm install @splidejs/splide

1. Once select a theme, link to the file by the <link> element:

<!-- Link to the file hosted on your server, -->
<link rel="stylesheet" href="path-to-the-file/splide.min.css">

<!-- or link to the CDN -->
<link rel="stylesheet" href="url-to-cdn/splide.min.css">

2. Or import files if your bundler supports CSS:

// Default theme
import '@splidejs/splide/css';

// or other themes
import '@splidejs/splide/css/skyblue';
import '@splidejs/splide/css/sea-green';

// or only core styles
import '@splidejs/splide/css/core';

3. Next, build your carousel with HTML.

<section class="splide" aria-label="Splide Basic HTML Example">
  <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>

Check Here – [Kiwwwi] Easy to Use Responsive Javascript Carousel Slider Plugin


Available Options

Here is a list of options and brief explanations.

  • 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 the 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 the 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 hovers.
  • pauseOnFocus: Whether to stop autoplay while slider elements are focused.
  • resetProgress: Whether to reset the 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 if 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 the power of flick. The larger number is, the farther a slider runs by flick.
  • flickMaxPages: Limit the 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 a navigation for another.
  • trimSpace: Whether to trim spaces before the first slide or after the last one.
  • updateOnMove: If true, “is-active” class is added to the slide element before the transition.
  • throttle: Throttle duration for the resize event.
  • breakpoints: Breakpoints definitions.
  • classes: Collection of class names.
  • i18n: Collection of texts for i18n.

Full-featured Slider & Carousel Plugin, Custom Carousel Slider CSS, Carousel Slider Plugin


Responsive 3D Carousel Slider jQuery Plugin Supporting IE8, IE9
A Vanilla JavaScript Content Carousel Slider Plugin | gaBasicSlider

See Demo And Download

Official Website(Splidejs): Click Here

This superior jQuery/javascript plugin is developed by Splidejs. For extra Advanced Usage, please go to the official website.