{% liquid

  assign collections = section.settings.collection_list_items

%}

<!-- Carousel Wrapper -->

<div class="collection-carousel-wrapper max-w-[1400px]">

  <div class="collection-carousel" id="collectionCarousel">

    {% for collection in collections %}

      <div class="carousel-item">

        <a href="{{ collection.url }}">

          <img src="{{ collection.image | img_url: 'master' }}" alt="{{ collection.title }}" height="" width="">

          <h3>{{ collection.title }}</h3>

        </a>

      </div>

    {% endfor %}

  </div>

</div>

<style>

  .collection-carousel-wrapper {

    overflow: hidden;

    width: 100%;

    position: relative;

    margin: 30px auto;

  }

  .collection-carousel {

    display: flex;

    transition: transform 0.5s ease-in-out;

    will-change: transform;

  }

  .carousel-item {

    flex: 0 0 100%;

    text-align: center;

    justify-content: center; 

    padding: 10px;

    box-sizing: border-box;

  }

  .carousel-item img {

    max-width: 100%;

    height: 400px;

    object-fit: cover;

    display: block;

    margin: 0 auto 10px;

  }

  @media (min-width: 768px) {

    .carousel-item {

      flex: 0 0 50%;

    }

  }

  @media (min-width: 1024px) {

    .carousel-item {

      flex: 0 0 33.3333%;

    }

  }

</style>

<script>

  document.addEventListener('DOMContentLoaded', function () {

    const carousel = document.getElementById('collectionCarousel');

    const items = carousel.querySelectorAll('.carousel-item');

    const totalItems = items.length;

    let itemsPerView = 1;

    function updateItemsPerView() {

      if (window.innerWidth >= 1024) {

        itemsPerView = 3;

      } else if (window.innerWidth >= 768) {

        itemsPerView = 2;

      } else {

        itemsPerView = 1;

      }

    }

    updateItemsPerView();

    // Clone first few items to the end to enable infinite scroll

    for (let i = 0; i < itemsPerView; i++) {

      const clone = items[i].cloneNode(true);

      carousel.appendChild(clone);

    }

    let currentIndex = 0;

    let itemWidth = carousel.querySelector('.carousel-item').offsetWidth;

    function slideNextItem() {

      itemWidth = carousel.querySelector('.carousel-item').offsetWidth;

      currentIndex++;

      carousel.style.transition = 'transform 0.5s ease-in-out';

      carousel.style.transform = `translateX(-${currentIndex * itemWidth}px)`;

      // Reset to start if at clone

      if (currentIndex === totalItems) {

        setTimeout(() => {

          carousel.style.transition = 'none';

          carousel.style.transform = `translateX(0px)`;

          currentIndex = 0;

        }, 500);

      }

    }

    let interval = setInterval(slideNextItem, 3000); // Auto-scroll every 3s

    // Responsive: Reset on resize

    window.addEventListener('resize', () => {

      updateItemsPerView();

      itemWidth = carousel.querySelector('.carousel-item').offsetWidth;

      carousel.style.transition = 'none';

      carousel.style.transform = `translateX(0px)`;

      currentIndex = 0;

    });

  });

</script>

{% schema %}

{

  "name": "Collection Carousel",

  "settings": [

    {

      "type": "collection_list",

      "id": "collection_list_items",

      "label": "Collection_items"

    },

    {

      "type": "text",

      "id": "scroll_speed",

      "label": "Scroll Speed",

      "default": "1500"

    }

  ],

  "presets": [

    {

      "name": "Collection Carousel"

    }

  ]

}

{% endschema %}