Basic Slider

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

<!-- Custom Styles -->
<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 splide = new splidejsSplide(".splide", {
  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: {
    // Custom class names for the pagination elements
    pagination: "splide__pagination basic",
    page: "splide__pagination__page basic",
  },
  breakpoints: {
    768: {
      perPage: 2,
    },
    576: {
      perPage: 1,
    },
  },
});

splide.mount();
</script>