Splide

Quick reference for setting up and using Splide across projects.

Setup

CDN

<!-- Core -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide-core.min.css">

<!-- Extensions (optional) -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-intersection@0.2.0/dist/js/splide-extension-intersection.min.js"></script>

Extensions

Extension	Purpose
AutoScroll	Continuous ticker scrolling (logo bars, marquees)
Intersection	Pause/play based on viewport visibility

Required HTML Structure

<div class="my-slider splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 1</li>
      <li class="splide__slide">Slide 2</li>
      <li class="splide__slide">Slide 3</li>
    </ul>
  </div>
</div>

The splide__track and splide__list wrappers are required.

Basic Pattern

const el = document.querySelector('.my-slider');
if (!el) return;

const splide = new Splide(el, { type: "slide", perPage: 3, gap: "2rem" });
splide.mount();

// With extensions:
splide.mount({ AutoScroll });

Best Practices

Always Check Element Exists

if (!document.querySelector('.slider')) return;

Responsive Breakpoints

Use max-width logic — the value is the maximum screen width for that config:

breakpoints: {
  991: { perPage: 2 },
  600: { perPage: 1 }
}

Performance

Avoid more than 3 Splide instances per page
Use the Intersection extension to pause offscreen sliders
Only use autoWidth: true when slide widths genuinely vary

Loop Mode Requires Enough Slides

type: "loop" needs enough slides to fill the viewport. If too few, Splide falls back to "slide" mode silently.

Common Options

Option	Type	Description
`type`	`"slide"` / `"loop"` / `"fade"`	Transition mode
`perPage`	number	Visible slides
`perMove`	number	Slides per advance
`gap`	string	CSS gap between slides
`speed`	number	Transition duration (ms)
`drag`	boolean / `"free"`	Dragging behavior
`snap`	boolean	Snap after free drag
`focus`	`"center"` / number	Active slide alignment
`autoWidth`	boolean	Use natural slide width
`rewind`	boolean	Loop back to start
`arrows`	boolean	Show prev/next arrows
`pagination`	boolean	Show dot navigation
`autoplay`	boolean	Auto-advance
`interval`	number	Autoplay interval (ms)

Troubleshooting

Not rendering: Check splide__track and splide__list wrappers exist
Not looping: Need enough slides to fill viewport in loop mode
AutoScroll not working: Pass extension to mount: splide.mount({ AutoScroll })
Responsive not applying: Breakpoints use max-width, check values don't conflict

Was this page helpful?

We use this feedback to improve our documentation.

Thanks for your feedback