Centered Slider with Active State

Looping full-bleed Splide slider where the active slide is in the center and has custom CSS styling. Combo class on .splide__track to override default Splide CSS overflow: hidden with visible and show slides outside the container.

Config

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

<style>
.splide__pagination__page.centered {
    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.centered.is-active {
    background: #e5693b;
    transform: scale(1.4);
}
.splide__slide.centered.is-active {
  filter: brightness(100%);
  transform: scale(1.1);
}
</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: 4,
  focus: "center",
  perMove: 1,
  gap: "3rem",
  pagination: true,
  padding: "2rem",
  classes: {
    pagination: "splide__pagination centered",
    page: "splide__pagination__page centered",
  },
  breakpoints: {
    991: {
      perPage: 3,
    },
    478: {
      gap: "2rem",
      padding: "4rem",
      perPage: 1,
    },
  },
});

splide.mount();
</script>