Custom Pagination

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

<style>
.splide__pagination__page.custom-pagination {
    background: #feffff;
    border: 0;
    border-radius: 0.25rem;
    display: inline-block;
    height: 1.5rem;
    margin: 3px;
    opacity: 1;
    padding: 0;
    position: relative;
    transition: transform .2s ease;
    width: 1.5rem;
}
.splide__pagination__page.custom-pagination.is-active {
    background: #e5693b;
    transform: scale(1.0);
    color: white;
}
</style>

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

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

splide.on("pagination:mounted", function (data) {
  // Inject the page number into the pagination buttons
  // Pad single digits with a leading zero
  data.items.forEach(function (item) {
    item.button.textContent = String(item.page + 1).padStart(2, "0");
  });
});

splide.mount();
</script>