Padding

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

<style>
.splide__pagination__page.padding {
    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.padding.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,
  padding: "6rem",
  perPage: 3,
  gap: "1rem",
  pagination: true,
  classes: {
    pagination: "splide__pagination padding",
    page: "splide__pagination__page padding",
  },
  breakpoints: {
    768: {
      perPage: 2,
    },
    576: {
      perPage: 1,
    },
  },
});

splide.mount();
</script>