"-x-slide-current" value in class name?

[mircotripoczky]

Context: I’ve build a slider within a section with the custom attribute data-x-slide-context to be able to control the slider by using dynamic buttons also within that section. The content of the slider and the dynamic buttons is generated by using json data. One key field is “goto” with values from 1-x which than is used to navigate the slider (custom attribute data-x-slide-goto with the value {{dc:looper:field key="goto"}}. That works like a charm.

I know it’s possible to use dynamic content within class names at the customize tab of an element… e.g. btn-{{dc:looper:field key="goto"}}. The output is based than on the value of the field key “goto” of the json data and looks like that: btn-1, btn-2 etc.

Now the question is, if it’s also possible to get the value of a variable into the class name? My idea was to have something like that: btn-{{dc:looper:field key="goto"}}-var(--x-slide-current) (maybe my syntax is wrong). The class name output than should be btn-1-1 (if the current slide is first one) and btn-1-2 (if the current slide is the second one). That way I could define styles for every value combination where the 1st number equals the 2nd number like 1-1, 2-2, etc to set e.g. a different background colors for the “active” button.

Or is there an easier way?

best regards
Mirco

[ruenel]

Hi Mirco,

Thanks for writing in! If you ask me, that would be one of the easiest ways to utilize the available tools there is to achieve that naming convention for your elements.

Cheers.

[mircotripoczky]

hi @ruenel

thought so too, but on a second thought it seems not to be possible to use --x-slide-current in any way to dynamically add a value to a class name. Something like {{dc:looper:field key="goto"}} is working, because it’s used when the page is rendered.

Or my syntax is wrong for “generating” the class name by using btn-{{dc:looper:field key="goto"}}-var(--x-slide-current)

My guess is, that I should use some jquery for adding and removing classes from elements on click.

best regards
Mirco

PS: Adding some jquery withaddClass for the active button and removeClass for the inactive buttons worked well. - so topic solved

And thanks to ChatGPT I was able to optimized my initial jquery code from 90 to just 10 lines

[tristup]

Hi Micro,

Glad to know that you are able to find a solution for this.

Thanks