Hero Slider Progress Bar on other sliders

You have this nice progress bar in the hero slider, ist it possible to create a progress bar on other sliders? For example a inline slider?

Because i’ve tried to recreate it on another slider with the

scaleX(var(--x-slide-autoplay-progress))

in the transform effect with transition timing set to 0ms. But it didn’t work, did i oversee something?

Hello @Regnalf,

Thanks for writing in!

The Progress Bar is consists of two nested Div elements.

Screen Shot 2021-11-28 at 1.10.14 PM

The effect is then applied to the 2nd Div element.

If this is not working, please provide us access to the site so we can check your slider settings. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

I found the missing part, it’s the custom attribute

   data-x-slide-context

in the root element above the slider container. Even if quoted as “not required” in the docs, it seems to be important for this progress bar element. Maybe you could add this info to the docs, or at least to the course pack!!

Thank you for your feedback, @Regnalf. I’ll forward post this in our tracker so this will be queued for checking by our development team.

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