07 Three Basic Sliders on Same Page

Config

<link href="
https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css
" rel="stylesheet">

<style>
.splide__pagination__page.basic {
    background: #feffff;
    border: 0;
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    margin: 3px;
    opacity: 1;
    padding: 0;
    position: relative;
    transition: transform .2s ease;
    width: 8px;
}
.splide__pagination__page.basic.is-active {
    background: #e5693b;
    transform: scale(1.4);
}
</style>

<script type="module">
import splidejsSplide from "https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/+esm";

const basicSplideElements = document.querySelectorAll(".splide.basic");

basicSplideElements.forEach((basicSplide) => {
  const splide = new splidejsSplide(basicSplide, {
    type: "loop",
    updateOnMove: true,
    perPage: 3,
    focus: 0, // gives us a pagination dot for each element, instead of 1 dot per page
    perMove: 1,
    gap: "1rem",
    pagination: true,
    classes: {
      pagination: "splide__pagination basic",
      page: "splide__pagination__page basic",
    },
    breakpoints: {
      768: {
        perPage: 2,
      },
      576: {
        perPage: 1,
      },
    },
  });

  splide.mount();
});
</script>
Three Basic Sliders on the same page

Config
