i want click and drag for desktop on my custom collection section

[Manishuk01]

i want click and drag for desktop on my custom collection section 

one mobile everything working fine 

and also we can also add auto scroll with touch 

site - https://g8tiyz-ui.myshopify.com/?_ab=0&_fd=0&_sc=1

{% schema %}
{
  "name": "Custom Collections",
  "settings": [],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "id": "collection",
          "type": "collection",
          "label": "Select Collection"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Collections",
      "category": "Collections",
      "blocks": [
        {
          "type": "collection"
        }
      ]
    }
  ]
}
{% endschema %}

<div class="scroll-container">
  <div class="custom-collections">
    {% for block in section.blocks %}
      {% if block.settings.collection %}
        <div class="collection-item">
          <a href="{{ block.settings.collection.url }}">
            <img src="{{ block.settings.collection.featured_image | img_url: 'large' }}" alt="{{ block.settings.collection.title }}">
           
          </a>
        </div>
      {% endif %}
    {% endfor %}
    <!-- Duplicate elements for infinite loop effect -->
    {% for block in section.blocks %}
      {% if block.settings.collection %}
        <div class="collection-item">
          <a href="{{ block.settings.collection.url }}">
            <img src="{{ block.settings.collection.featured_image | img_url: 'large' }}" alt="{{ block.settings.collection.title }}">
           
          </a>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>

<style>
 .scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding: 10px 0;
    cursor : grab;
  }

  .custom-collections {
    display: flex;
    gap: 30px;
  }

  .collection-item {
    flex: 0 0 auto;
    width: 200px; /* Adjust as needed */
  }

  .collection-item img {
    width: auto;
    height: 300px;
    
  }

  .collection-item h3 {
    text-align: center;
    font-size: 18px;
    margin-top: 8px;
  }

   /* Hide scrollbar but keep scrolling functionality */
  .scroll-container::-webkit-scrollbar {
    display: none;
  }
  .scroll-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const scrollContainer = document.querySelector(".scroll-container");

    // Enable horizontal scrolling with mouse wheel
    scrollContainer.addEventListener("wheel", function(event) {
      if (event.deltaY !== 0) {
        event.preventDefault();
        scrollContainer.scrollLeft += event.deltaY;
      }
    });
  });
</script>

[CodingFifty]

Hi @Manishuk01,

Here is the updated version.

{% schema %}
{
  "name": "Custom Collections",
  "settings": [],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "id": "collection",
          "type": "collection",
          "label": "Select Collection"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Collections",
      "category": "Collections",
      "blocks": [
        {
          "type": "collection"
        }
      ]
    }
  ]
}
{% endschema %}

<div class="scroll-container">
  <div class="custom-collections">
    {% for block in section.blocks %}
      {% if block.settings.collection %}
        <div class="collection-item">
          <a href="{{ block.settings.collection.url }}">
            <img src="{{ block.settings.collection.featured_image | img_url: 'large' }}" alt="{{ block.settings.collection.title }}">
          </a>
        </div>
      {% endif %}
    {% endfor %}
    <!-- Duplicate elements for infinite loop effect -->
    {% for block in section.blocks %}
      {% if block.settings.collection %}
        <div class="collection-item">
          <a href="{{ block.settings.collection.url }}">
            <img src="{{ block.settings.collection.featured_image | img_url: 'large' }}" alt="{{ block.settings.collection.title }}">
          </a>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>

<style>
  .scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding: 10px 0;
    cursor: grab;
    position: relative;
  }

  .custom-collections {
    display: flex;
    gap: 30px;
  }

  .collection-item {
    flex: 0 0 auto;
    width: 200px; /* Adjust as needed */
  }

  .collection-item img {
    width: auto;
    height: 300px;
  }

  /* Hide scrollbar but keep scrolling functionality */
  .scroll-container::-webkit-scrollbar {
    display: none;
  }
  .scroll-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Active state for click and drag */
  .scroll-container.active {
    cursor: grabbing;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const scrollContainer = document.querySelector(".scroll-container");
    let isDown = false;
    let startX;
    let scrollLeft;

    // Mouse click & drag for desktop
    scrollContainer.addEventListener("mousedown", (e) => {
      isDown = true;
      scrollContainer.classList.add("active");
      startX = e.pageX - scrollContainer.offsetLeft;
      scrollLeft = scrollContainer.scrollLeft;
    });

    scrollContainer.addEventListener("mouseleave", () => {
      isDown = false;
      scrollContainer.classList.remove("active");
    });

    scrollContainer.addEventListener("mouseup", () => {
      isDown = false;
      scrollContainer.classList.remove("active");
    });

    scrollContainer.addEventListener("mousemove", (e) => {
      if (!isDown) return;
      e.preventDefault();
      const x = e.pageX - scrollContainer.offsetLeft;
      const walk = (x - startX) * 2; // Adjust speed
      scrollContainer.scrollLeft = scrollLeft - walk;
    });

    // Enable horizontal scrolling with mouse wheel
    scrollContainer.addEventListener("wheel", function(event) {
      if (event.deltaY !== 0) {
        event.preventDefault();
        scrollContainer.scrollLeft += event.deltaY;
      }
    });

    // Auto scroll effect for mobile
    function autoScroll() {
      if (window.innerWidth <= 768) { // Mobile check
        scrollContainer.scrollLeft += 1;
        if (scrollContainer.scrollLeft >= scrollContainer.scrollWidth - scrollContainer.clientWidth) {
          scrollContainer.scrollLeft = 0; // Reset when reaching the end
        }
      }
    }

    setInterval(autoScroll, 40); // Adjust speed of auto scroll
  });
</script>

[Manishuk01]

It's work but lagging on mobile and on pc there is problem when I click on the image it's dragging the image not scrolling 

[CodingFifty]

{% schema %}
{
  "name": "Custom Collections",
  "settings": [],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "id": "collection",
          "type": "collection",
          "label": "Select Collection"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Collections",
      "category": "Collections",
      "blocks": [
        {
          "type": "collection"
        }
      ]
    }
  ]
}
{% endschema %}

<div class="scroll-container">
  <div class="custom-collections">
    {% for block in section.blocks %}
      {% if block.settings.collection %}
        <div class="collection-item">
          <a href="{{ block.settings.collection.url }}">
            <img src="{{ block.settings.collection.featured_image | img_url: 'large' }}" alt="{{ block.settings.collection.title }}">
          </a>
        </div>
      {% endif %}
    {% endfor %}
    <!-- Duplicate elements for infinite loop effect -->
    {% for block in section.blocks %}
      {% if block.settings.collection %}
        <div class="collection-item">
          <a href="{{ block.settings.collection.url }}">
            <img src="{{ block.settings.collection.featured_image | img_url: 'large' }}" alt="{{ block.settings.collection.title }}">
          </a>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>

<style>
  .scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding: 10px 0;
    cursor: grab;
    position: relative;
  }

  .custom-collections {
    display: flex;
    gap: 30px;
  }

  .collection-item {
    flex: 0 0 auto;
    width: 200px;
  }

  .collection-item img {
    width: auto;
    height: 300px;
    pointer-events: none; /* Prevents image dragging */
  }

  .scroll-container::-webkit-scrollbar {
    display: none;
  }
  .scroll-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scroll-container.active {
    cursor: grabbing;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const scrollContainer = document.querySelector(".scroll-container");
    let isDown = false;
    let startX;
    let scrollLeft;

    scrollContainer.addEventListener("mousedown", (e) => {
      isDown = true;
      scrollContainer.classList.add("active");
      startX = e.pageX - scrollContainer.offsetLeft;
      scrollLeft = scrollContainer.scrollLeft;
      e.preventDefault(); // Prevents unwanted behavior
    });

    scrollContainer.addEventListener("mouseleave", () => {
      isDown = false;
      scrollContainer.classList.remove("active");
    });

    scrollContainer.addEventListener("mouseup", () => {
      isDown = false;
      scrollContainer.classList.remove("active");
    });

    scrollContainer.addEventListener("mousemove", (e) => {
      if (!isDown) return;
      e.preventDefault();
      const x = e.pageX - scrollContainer.offsetLeft;
      const walk = (x - startX) * 2;
      scrollContainer.scrollLeft = scrollLeft - walk;
    });

    scrollContainer.addEventListener("wheel", function(event) {
      if (event.deltaY !== 0) {
        event.preventDefault();
        scrollContainer.scrollLeft += event.deltaY;
      }
    });

    // Smooth auto-scrolling for mobile
    let autoScrollSpeed = 0.5;
    function autoScroll() {
      if (window.innerWidth <= 768) {
        scrollContainer.scrollLeft += autoScrollSpeed;
        if (scrollContainer.scrollLeft >= scrollContainer.scrollWidth - scrollContainer.clientWidth) {
          scrollContainer.scrollLeft = 0;
        }
        requestAnimationFrame(autoScroll);
      }
    }

    requestAnimationFrame(autoScroll);
  });
</script>