Add dynamic css classes on carousel slides

Technical Q&A
,

Topic summary

A Shopify developer needs to add dynamic CSS classes (banner1, banner2, etc.) to carousel slides for Google Tag Manager event tracking purposes. The classes should be applied to the <a> tag within each slide.

Proposed Solution:
Another user suggested using Liquid’s forloop.index to generate sequential class names:

{% assign bannerClass = "banner" | append: forloop.index %}

Current Issue:
The original poster implemented the suggested code inside the for block in section.blocks loop, but reports that only “banner1” is being added to all slides instead of incrementing (banner1, banner2, banner3, etc.).

Context:

  • The carousel contains 4 slides
  • Swiper.js is being used, which duplicates first/last slides
  • Goal is to track which banner users click most frequently

Status: The issue remains unresolved. The forloop.index approach should theoretically work (incrementing 1, 2, 3 for each block), but the implementation isn’t producing the expected sequential classes.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hi Community,

I have a carousel slideshow on my homepage banner on my shopify website. I want to add a class on each slide in the carousel for google tag manager event tracking. For example 1st banner will have a class of “banner1” 2nd will have “banner2” and so on. I have pasted the liquid code for the banner section. Can anyone lease guide me on how I can loop the slides in such a way that I can achieve this?

Shop URL: https://setu.in/

Here is the code for the section:

I want to add the class on “a” tag.

{%- for block in section.blocks -%}

{% comment %}

{{ block.settings.subheading}}

{{ block.settings.slide_title}}

{% if block.settings.button_label != blank %} {% endif %}
{% endcomment %}
{%- endfor -%}
2

I think I’d use the forLoop index:

{% assign bannerClass = “banner” | append: forloop.index %}
then your “insert class here” would be replaced with {{ bannerClass }}

3

I tried this method but its only adding “banner1” class to all the slides.

4

Is each block an individual slide?
if so it should look like:

{%- for block in section.blocks -%}

{% assign bannerClass = “banner” | append: forloop.index %}

the assign should be inside the for loop.

5

This is what I did:

{%- for block in section.blocks -%} {% assign bannerClass = "banner" | append: forloop.index %}

{% comment %}

{{ block.settings.subheading}}

{{ block.settings.slide_title}}

{% if block.settings.button_label != blank %} {% endif %}
{% endcomment %}
{%- endfor -%}
6

… and you’ve got more that one slide in the slideshow? forloop.index will start at one for the first block and increase by one for each block thereafter, so if you have 3 blocks each loop it will go 1, 2 then 3. If that number isn’t increasing, the loop isn’t increasing.

Can you share a link to the store?

7

Sure here’s the link to the store: https://setu.in/

I have 4 slides in the carousel.

8

swiper adds two additional slides by duplicating the first and last… what are you actually trying to achieve by adding the classes to the slides?

9

I want to track which banner the user is clicking on the most.