<!-- Splide Carousel -->
<div class="splide" id="splide-demo">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <img src="../src/img/work/work1.jpg" alt="image alt" class="w-full">
      </li>
      <li class="splide__slide">
        <img src="../src/img/work/work2.jpg" alt="image alt" class="w-full">
      </li>
      <li class="splide__slide">
        <img src="../src/img/work/work3.jpg" alt="image alt" class="w-full">
      </li>
    </ul>
  </div>
</div>

<!-- Splide.js css and js -->
<link rel="stylesheet" href="../vendors/@splidejs/splide/dist/css/splide.min.css">
<script src="../vendors/@splidejs/splide/dist/js/splide.min.js"></script>

<!-- Initialize Splide -->
<script>
  document.addEventListener( 'DOMContentLoaded', function () {
    new Splide( '#splide-demo', {
      type   : 'loop',  // Set type to 'loop' for infinite looping
      perPage: 1,       // Number of slides visible per page
      autoplay: true,   // Automatically start the slideshow
      interval: 3000,   // Set autoplay interval in milliseconds
    } ).mount();
  } );
</script>