Collection Slider shows wrong slide count

Sup guys,

as contacting the support doesn’t help in this concern, I’m asking the community. I’m using spotlight from shopify and the slider pagination is wrong. I’ve searched and tried to analyze the code but it just doesn’t work. Can someone explain me how the total count of slides is determined? It’s a counter without js, only liquid. For my case of use I tried to subtract 1 count in the span but somehow the class is controlled from outside.

{{ products_to_display | minus: 1 }}

Doesn’t work since smh the span class “slider-counter–total” is controlled from outside. When I change the class the code applies. Anyways the current page pagination doesn’t update and stays on 1. I just don’t get the relations and I’m confused asf. Maybe some1 can help me. Added the whole code of the liquid file underneath. On https://96c392-2.myshopify.com/ you can see the case.

Show More

{%- if section.settings.title != blank -%}## {{ section.settings.title }}{%- endif -%} {%- if section.settings.description != blank or section.settings.show_description and section.settings.collection.description != empty -%}{%- if section.settings.show_description -%} {{ section.settings.collection.description }} {%- else -%} {{ section.settings.description -}} {%- endif %}
{%- endif -%}
{%- if section.settings.show_view_all and more_in_collection -%}{{ 'sections.featured_collection.view_all' | t }} 
{%- endif -%} {% if section.settings.image_shape == 'arch' %} {% render 'mask-arch' %} {%- endif -%}

{% schema %} { "name": "t:sections.featured-collection.name", "tag": "section", "class": "section", "disabled_on": { "groups": ["header", "footer"] }, "settings": [ { "type": "inline_richtext", "id": "title", "default": "Featured collection", "label": "t:sections.featured-collection.settings.title.label" }, { "type": "select", "id": "heading_size", "options": [ { "value": "h2", "label": "t:sections.all.heading_size.options__1.label" }, { "value": "h1", "label": "t:sections.all.heading_size.options__2.label" }, { "value": "h0", "label": "t:sections.all.heading_size.options__3.label" } ], "default": "h1", "label": "t:sections.all.heading_size.label" }, { "type": "richtext", "id": "description", "label": "t:sections.featured-collection.settings.description.label" }, { "type": "checkbox", "id": "show_description", "label": "t:sections.featured-collection.settings.show_description.label", "default": false }, { "type": "select", "id": "description_style", "label": "t:sections.featured-collection.settings.description_style.label", "options": [ { "value": "body", "label": "t:sections.featured-collection.settings.description_style.options__1.label" }, { "value": "subtitle", "label": "t:sections.featured-collection.settings.description_style.options__2.label" }, { "value": "uppercase", "label": "t:sections.featured-collection.settings.description_style.options__3.label" } ], "default": "body" }, { "type": "collection", "id": "collection", "label": "t:sections.featured-collection.settings.collection.label" }, { "type": "range", "id": "products_to_show", "min": 2, "max": 25, "step": 1, "default": 4, "label": "t:sections.featured-collection.settings.products_to_show.label" }, { "type": "range", "id": "columns_desktop", "min": 1, "max": 5, "step": 1, "default": 4, "label": "t:sections.featured-collection.settings.columns_desktop.label" }, { "type": "checkbox", "id": "full_width", "label": "t:sections.featured-collection.settings.full_width.label", "default": false }, { "type": "checkbox", "id": "show_view_all", "default": true, "label": "t:sections.featured-collection.settings.show_view_all.label" }, { "type": "select", "id": "view_all_style", "label": "t:sections.featured-collection.settings.view_all_style.label", "options": [ { "value": "link", "label": "t:sections.featured-collection.settings.view_all_style.options__1.label" }, { "value": "outline", "label": "t:sections.featured-collection.settings.view_all_style.options__2.label" }, { "value": "solid", "label": "t:sections.featured-collection.settings.view_all_style.options__3.label" } ], "default": "solid" }, { "type": "checkbox", "id": "enable_desktop_slider", "label": "t:sections.featured-collection.settings.enable_desktop_slider.label", "default": false }, { "type": "color_scheme", "id": "color_scheme", "label": "t:sections.all.colors.label", "info": "t:sections.all.colors.has_cards_info", "default": "background-1" }, { "type": "header", "content": "t:sections.featured-collection.settings.header.content" }, { "type": "select", "id": "image_ratio", "options": [ { "value": "adapt", "label": "t:sections.featured-collection.settings.image_ratio.options__1.label" }, { "value": "portrait", "label": "t:sections.featured-collection.settings.image_ratio.options__2.label" }, { "value": "square", "label": "t:sections.featured-collection.settings.image_ratio.options__3.label" } ], "default": "adapt", "label": "t:sections.featured-collection.settings.image_ratio.label" }, { "type": "select", "id": "image_shape", "options": [ { "value": "default", "label": "t:sections.all.image_shape.options__1.label" }, { "value": "arch", "label": "t:sections.all.image_shape.options__2.label" }, { "value": "blob", "label": "t:sections.all.image_shape.options__3.label" }, { "value": "chevronleft", "label": "t:sections.all.image_shape.options__4.label" }, { "value": "chevronright", "label": "t:sections.all.image_shape.options__5.label" }, { "value": "diamond", "label": "t:sections.all.image_shape.options__6.label" }, { "value": "parallelogram", "label": "t:sections.all.image_shape.options__7.label" }, { "value": "round", "label": "t:sections.all.image_shape.options__8.label" } ], "default": "default", "label": "t:sections.all.image_shape.label", "info": "t:sections.all.image_shape.info" }, { "type": "checkbox", "id": "show_secondary_image", "default": false, "label": "t:sections.featured-collection.settings.show_secondary_image.label" }, { "type": "checkbox", "id": "show_vendor", "default": false, "label": "t:sections.featured-collection.settings.show_vendor.label" }, { "type": "checkbox", "id": "show_rating", "default": false, "label": "t:sections.featured-collection.settings.show_rating.label", "info": "t:sections.featured-collection.settings.show_rating.info" }, { "type": "checkbox", "id": "enable_quick_add", "default": false, "label": "t:sections.featured-collection.settings.enable_quick_buy.label" }, { "type": "header", "content": "t:sections.featured-collection.settings.header_mobile.content" }, { "type": "select", "id": "columns_mobile", "default": "2", "label": "t:sections.featured-collection.settings.columns_mobile.label", "options": [ { "value": "1", "label": "t:sections.featured-collection.settings.columns_mobile.options__1.label" }, { "value": "2", "label": "t:sections.featured-collection.settings.columns_mobile.options__2.label" } ] }, { "type": "checkbox", "id": "swipe_on_mobile", "default": false, "label": "t:sections.featured-collection.settings.swipe_on_mobile.label" }, { "type": "header", "content": "t:sections.all.padding.section_padding_heading" }, { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_top", "default": 36 }, { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_bottom", "default": 36 } ], "presets": [ { "name": "t:sections.featured-collection.presets.name" } ] } {% endschema %} ```

Hi @xdaysleft

I have checked, and it shows it’s working well on my side. Please change this code

{{ products_to_display | minus: 1 }}

To this and check if slide count work correctly

{{ products_to_display }}

Hey @Dan-From-Ryviu ,

thanks for the answer in the first place. When changing the resolution, you will see the problem. I’ve tried your solution, unfortunately it dosn’t change anything. I’ve attached an video to show u exactly what I mean

I have the same issue, I dont know how to access slider-counter–total. Mine always shows an extra number, so I wanted to do the | minus: 1 but it doesnt work.

Hi did you figure out a fix?

Hi did you figure out a fix?

Did you found out the answer?

Find these on global.js
this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1;

just remove +1

like this

this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage;