Splide.js custom CMS carousels and sliders in Webflow

Tag name

Visit https://splidejs.com/

This document provides instructions for implementing a CMS slider carousel using the Splide.js library. The document includes HTML structure, library and stylesheet links, and configuration options. Additionally, it provides instructions for creating custom arrows and pagination.

Step 1 — Structure

Setup the structure in Webflow

Follow the provided HTML structure, using the classes Splide provides in their docs. For example, if applied to a Webflow collection, it would be:

  • section = ‘.splide’
  • collection list wrapper = ‘.splide__track’
  • collection list = ‘.splide__list’
  • collection item = ‘.splide__slide’
<!-- [jonnyrich.com] Splide — html structure -->
<section class="splide" aria-labelledby="carousel-heading">
  <h2 id="carousel-heading">Splide Basic HTML Example</h2>

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

Step 2

Link to the core CSS stylesheet inside the <head> tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide-core.min.css" integrity="sha256-ZAXImCY06SjVuIrJfWUETkyCctX5aGdL1AVEBX5CxZA=" crossorigin="anonymous">			

Step 3

Add the splide.js library before </body> tag:

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js" integrity="sha256-FZsW7H2V5X9TGinSjjwYJ419Xka27I8XPDmWryGlWtw=" crossorigin="anonymous"></script>			

Step 4

Configure options before </body> tag:

document.addEventListener("DOMContentLoaded", function () {
  var splide = new Splide(".splide", {
    type: "slide",
    perPage: 3,
    rewind: false,
    speed: 400,
    gap: "1rem",
    dragMinThreshold: ({ mouse: number, touch: number } = 40),
    flickPower: 500,
    flickMaxPages: 1,
    updateOnMove: false,
    easing: "cubic-bezier(0.25, 1, 0.5, 1)",
    breakpoints: {
      991: {
        perPage: 3
      767: {
        perPage: 2
      479: {
        perPage: 1,
        padding: { right: "2rem" }

  splide.on("overflow", function (isOverflow) {
    // Reset the carousel position

    splide.options = {
      arrows: isOverflow,
      pagination: isOverflow,
      drag: isOverflow,
      clones: isOverflow ? undefined : 0 // Toggle clones


Unlock your website business

Let's kickstart this exciting journey with an obligation-free initial consultation. Click below to contact, or send an email to jkrdesignsa@gmail.com