Community forum for knowledge and support

Updated 11 months ago

How to use the "header 103" slider with CMS content

At a glance

A community member is having trouble using the "header 103" slider with CMS content. They tried using the Finsweet attribute, but the progress bars all move at the same time instead of changing sequentially. Another community member suggests that there is no "easy" way to do this and that it would likely require JavaScript to create a loop that tracks when each progress bar is done before starting the next one. A third community member shares a creative solution of using 4 collections, one inside each slide and limited to 1 item, which resolved the issue. The other community members express appreciation for the shared solution.

Useful resources

Hello Relumers!
Does anyone know how to use the "header 103" slider (https://library.relume.io/components/header-103) with CMS content? I tried using the Finsweet attribute, and it works 99%, except that the progress bars all move at the same time and don't change sequentially one by one (while the sliders change correctly both over time and by click).

Thank you very much!

A
M
4 comments

phew, this was awhile ago....but unfortunately there's no "easy" way to do this - my guess is it would have to be through JS - some sort of loop that looks for how many items there are, and knows when one progress bar is done before starting the next one, and so on.

I resolved with 4 colections, one inside each slide and limited to 1 item jeje.

Thanks matt!

oooh creative. Nice! Thanks for sharing that!

Add a reply
Sign up and join the conversation on Slack