Two Pack Slider with Custom Arrows

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. Custom arrows on side of slider.

Config

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

<style>
.splide__pagination__page.two-pack {
    background: #feffff;
    border: 0;
    border-radius: 50%;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 3px;
    opacity: 1;
    padding: 0;
    position: relative;
    transition: transform .2s ease;
}
.splide__pagination__page.two-pack.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: 2,
  arrows: false,
  gap: "2rem",
  pagination: true,
  classes: {
    pagination: "splide__pagination two-pack",
    page: "splide__pagination__page two-pack",
    prevArrow: "splide__custom-arrow two-pack-prev",
    nextArrow: "splide__custom-arrow two-pack-next",
  },
  breakpoints: {
    768: {
      perPage: 1,
    },
  },
});

splide.mount();

const prevArrow = document.querySelector(".two-pack-prev");
const nextArrow = document.querySelector(".two-pack-next");

prevArrow.addEventListener("click", () => {
  splide.go("<");
});
nextArrow.addEventListener("click", () => {
  splide.go(">");
});
</script>