Hello,
When I attempt to navigate to this particular slider, it consistently slides to the first slider of the collection instead of the intended slider. Could you please review the code to address this issue?
Additionally, it seems that the swipe arrow functionality only moves the first collection slider within the section, neglecting the others
https://060ef5-5.myshopify.com/
## {{ section.settings.title | escape }}
{% for block in section.blocks %}
{% assign product = all_products[block.settings.product_item] %}
{% comment %}
{{ product.title }}
{{ product.price | money }}
{% endcomment %}
{% endfor %}
{% 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 %}
Hey @Charlo-007 ,
Replace the code with this.
## {{ section.settings.title | escape }}
{% for block in section.blocks %}
{% assign product = all_products[block.settings.product_item] %}
{% comment %}
{{ product.title }}
{{ product.price | money }}
{% endcomment %}
{% endfor %}
{% 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 %}
Hello, you will need to change the behaviour of your nextClickHandler and prevClickHandler:
function nextClickHandler() {
const source = event.target || event.srcElement;
var p = source.parentNode;
while (!p.classList.contains("dawn-product-slider")) {
var o = p;
p = o.parentNode;
}
const el = p.querySelector("#slider");
el.scrollTo({
top: 0,
left: el.scrollLeft + 250,
behavior: 'smooth'
});
}
function prevClickHandler() {
const source = event.target || event.srcElement;
var p = source.parentNode;
while (!p.classList.contains("dawn-product-slider")) {
var o = p;
p = o.parentNode;
}
const el = p.querySelector("#slider");
el.scrollTo({
top: 0,
left: el.scrollLeft - 250,
behavior: 'smooth'
});
}
Kind Regards,
Michal Kopec
1 Like
@ThePrimeWeb Could you please review the code again to address this issue why are products not showing in the 3rd and 4th sections? https://060ef5-5.myshopify.com/
Because you didn’t add products?
1 Like
pls check ss @ThePrimeWeb
You would have to check on your end what you did with the theme, maybe some other code you wrote is breaking this one. Because when I try to have 4 or more of these sections it works fine for me, there’s nothing odd with the code.
The error you are showing has no impact. It’s just a warning, not an error. Just saying that img_url will be removed in the future, so you might want to switch to image_url. But in the meantime it is working.
1 Like
@ThePrimeWeb the slider stops displaying products altogether, showing only a maximum of 20 products across all sections where it’s implemented. And start repeating the same product after 20 products.
Request to Check Product Slider Code: ( Product Slider is not working when I use it multiple times)
https://community.shopify.com/c/shopify-design/request-to-check-product-slider-code-product-slider-is-not/m-p/2549441#M669599
Hey @Charlo-007 ,
Try this. Remove the sections and add them again from scratch.
## {{ section.settings.title | escape }}
{% for block in section.blocks %}
{% assign product = block.settings.product_item %}
{% comment %}
{{ product.title }}
{{ product.price | money }}
{% endcomment %}
{% endfor %}
{% 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 %}
Awesome 
Made my day @ThePrimeWeb
