Modern sliders count slider items

hi there,
is it possible to add a counter for the slider items?
here is a example on codepen:

in the left bottom corner

thanks

1 Like

Inside your slide container you are going to want to utilize the variable --x-slide-current (--x-slide-total and others are on the container element check it out). In a text element, remove all content. And in the custom CSS of this text element see the sample below. Thanks for bringing this could be a good prefab element for us. “Current Slide Number” or something like that.

$el:before {
  counter-reset: variable var(--x-slide-current);
  content: counter(variable);
}

hi charlie,
unfortunately i can’t get this to work.
can you help me for once and tell me where and how I have to insert the variables exactly?
i’m trying to add a slider counter that counts in the pagination (e.g. 2/12 if i click further 3/12…)

thank you very much in advance for your help!

btw: is there any docu about variables? and how to use them?
can i use: {{dc:query:query_var key="–x-slide-total"}} to get the total page numbers?
(what i need is the slide pagination element with numbers instead of lines/dots, can you advice how to solve my problem?)

greetings

Hey @deranaloge,

You will have a structure something like this:

Both the “Total Slides” and “Current Slide” are Text elements. They have each an inline CSS as provided by @Charlie in his reply.

Alternatively, you can also use the dynamic content inside the Text element using the following:

  • {{dc:rvt:outlet state="slider" key="current"}} – Returns a string wrapped in a <span> that reflects the current index of your Slider.
  • {{dc:rvt:outlet state="slider" key="total"}} – Returns a string wrapped in a <span> that reflects the total number of indexes in your Slider.

If you want to have a slider pagination with number, you may need to create a custom one by inserting DIV, Button elements and the dynamic content to make it possible.

1 Like

hi!
when i tried charlies method with --x-slide-current i did always get a 0.
i dont know what i did wrong…

now with dynamic content it does work! many thanks.

one last question: where can i find these dynamic content variables? i did search the documenation but there is nothing. any advice how to find such things?

many thanks!

Hello @deranaloge,

You may have an incorrect structure or placed the code incorrectly. Anyways, I think the dynamic content is much better to use. It is very simple to use. The dynamic content is provided for the Slider element. You can actually check this in the Slider documentation which I have linked in my previous response:

Best Regards.

1 Like

great that worked! :slight_smile:
thank you so much.

1 Like

Hello @deranaloge,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.