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

<!-- Splide JS Markup -->
  
<div class="splide">
    <div class="splide__track">
        <div class="splide__list">
            <div class="splide__slide"></div>
        </div>
    </div>
</div>
<!-- Include Splide JS -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

<!-- Initialize Splide -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  new Splide('.splide', {
    type: 'slide',
    perPage: 4,
    //perMove: 1,
    gap: '0',
    pagination: false,
    arrows: false,
    drag: true,
    breakpoints: {
      1024: {
        perPage: 3,
      },
      768: {
        perPage: 2,
      },
      480: {
        perPage: 1,
      }
    }
  }).mount();
});
</script>