Request to Check Product Slider Code: ( Product Slider is not working when I use it multiple times)

-Charlo-007
Excursionist
25 0 0

Hey! 😊

 

When the product slider is utilized multiple times across different sections, it ceases to function properly. Specifically, after multiple uses, the slider stops displaying products altogether, showing only a maximum of 20 products across all sections where it's implemented. And start repeating same product after 20 products

 

Please thoroughly review the code related to the product slider functionality.

 

https://k0fohx0ewybfm3sy-68083908825.shopifypreview.com

 

Screenshot 2024-04-28 024637.png

 

 

<style>

  .dawn-product-slider {
    position: relative;
    margin: 0 auto;
  }
  .carousel-cell {
    scroll-snap-align: start;
  }
  .carousel-cell a img {
    max-width: 100%;
    width: 100%;
  }
  .carousel {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
  }
  a.next,
  a.previous{
    position: absolute;
    top: 50%;
    left: -50px;
    transform: translateY(-50%);
  }
  a.next {
    left: auto;
    right: -50px;
  }
  a.next svg,
  a.previous svg {
    width: 20px;
    height: auto;
  }  
</style>
<style>


  .dawn-product-slider {
    max-width: 1300px;
    margin: auto;
    padding: 0 0px;
    padding-bottom: 0px;
    margin-top: 0px;
  }
  .dawn-product-slider img {

      margin: 0 auto;
      display: block;
  }
  .dawn-product-slider .carousel-cell {
    background: #fff;
    border-radius: 1px;
    margin: auto;
    padding: 2px;
    margin: 2px;
    width: 200px;
    min-width: 200px;
  }
  .product-btn {
      width: 100%;
  }
  .dawn-product-slider a {
    color: black;
   	text-decoration: none; 
  }
  .dawn-product-slider a .title:hover {
   	text-decoration: underline; 
  }
  .dawn-product-slider a .title, .dawn-product-slider a .price {
   	margin: 0px;
  }
  .dawn-product-slider .flickity-button.flickity-prev-next-button.previous, 
  .dawn-product-slider .flickity-button.flickity-prev-next-button.next {
  	background: red;
    color: white;
  }
  .dawn-product-slider:focus-visible, .dawn-product-slider .carousel:focus-visible {
   	outline: unset;
    outline-offset: unset;
    box-shadow: unset; 
  }
 @media(max-width: 1300px){
    a.next{ right: 0;}
    a.previous{ left: 0;}
 }
.overflow-scroll-x {
    overflow-x: scroll;
}
  
</style>
<div class="collection page-width">
    <div class="title-wrapper-with-link">
        <h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>
    </div>

    <div class="dawn-product-slider">
       <div class="carousel" id="slider">
          {% for block in section.blocks %}
              {% assign product = all_products[block.settings.product_item] %}
              <div class="carousel-cell">
                <a href="{{ product.url }}">
                    <img src="{{ product.featured_image | img_url: 'master' }}"  border="0" />
                    {% comment %}
                               <p class="title">{{ product.title }}</p>
                                <p class="price">{{ product.price | money }}</p>
                    {% endcomment %}
                </a>
              </div>
          {% endfor %}
       </div>
        <a href="javascript&colon;void(0);" class="shopify-section-{{ section.id }}_previous previous">
            <svg viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M768 903.232l-50.432 56.768L256 512l461.568-448 50.432 56.768L364.928 512z" fill="#000000"></path></g></svg>
        </a>
        <a href="javascript&colon;void(0);" class="shopify-section-{{ section.id }}_next next">
            <svg viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M256 120.768L306.432 64 768 512l-461.568 448L256 903.232 659.072 512z" fill="#000000"></path></g></svg>
        </a>
    </div>
</div>  
<script>
    document.querySelector('.shopify-section-{{ section.id }}_next').addEventListener('click', function() {
        const el = document.querySelector('#shopify-section-{{ section.id }} #slider');
         el.scrollTo({
          top: 0,
          left: el.scrollLeft + 250,
          behavior: 'smooth'
        });
    });
  
    document.querySelector('.shopify-section-{{ section.id }}_previous').addEventListener('click', function() {
      const el = document.querySelector('#shopify-section-{{ section.id }} #slider');
       el.scrollTo({
        top: 0,
        left: el.scrollLeft - 250,
        behavior: 'smooth'
      });
    });
    </script>
{% schema %}
{
  "name": "Products slider",
  "settings": [
    {
      "type": "range",
      "id": "navigation_amount",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 6,
      "label": "Change the number of cards in view"
    },
    {
      "type": "color",
      "id": "navigation_color",
      "label": "Change color of the pagination|navigation|scrollbar"
    },
    {
      "type": "text",
      "id": "title",
      "default": "Products slider",
      "label": "t:sections.featured-collection.settings.title.label"
    }
  ] ,
    "blocks": [
    {
        "type": "card",
        "name": "Product card",
        "settings": [
          {
            "type": "product",
            "id": "product_item",
            "label": "Choose the product you want to displayed"
          }
        ]
    }
  ] ,
  "presets": [
    {
      "name": "Product slider",
      "category":"Custom"
    }
  ]
}
{% endschema %}  

 

 

Replies 0 (0)