-
Ehy there dear team,
I’m using the carousel block with pagination set to “progress bar.” How do I manage the background bar?
Example: https://imgur.com/hpiRhkP
I set the purple portion by using the “progress bar fill” selector as the background. But the full bar, which currently has 10% opacity—where do I control that if I want to change the opacity or simply change the color? If I change the background color using the other selectors—namely fraction current and fraction total—it doesn’t work.
Inspecting the page, to be even more precise, I’m referring to this: “:where(.gb-carousel-pagination)[data-pagination-type=progressbar] {
background-color: rgba(0, 0, 0, .1);” -
Hi Leonardo,
You can set the color directly on the Carousel Pagination block itself. Please see here:
https://cln.sh/p1fkFW48V4vd5pVtnp8m -
Totally miss it, thank you very much Alvind!
I’ll take advantage of your kindness to ask you another related thing. Is it possible to make the progress bar increase in sync with the slide duration? In other words, if the slide transition lasts three seconds, to see the progress bar advance over those three seconds. In the private info I’m attaching an example you’ll see in the hero.
Does this implementation require custom code? Thanks a lot.
-
Hi Leonardo,
Unfortunately, this synchronized progress bar animation isn’t a built-in feature of the GenerateBlocks carousel currently. The progress bar shows which slide you’re on relative to the total, but it doesn’t animate to reflect the autoplay timing.
What you’re describing – where the bar fills progressively during each slide’s display duration – would require custom JavaScript to sync the CSS animation with the carousel’s autoplay interval. The implementation would need to:
- Detect when a slide becomes active
- Reset the progress bar fill to 0%
- Animate it to 100% over the autoplay duration
- Reset when the next slide triggers
The GenerateBlocks carousel is built on Swiper, which does have events you can hook into
(slideChange,autoplayTimeLeft, etc.) that could make this possible. TheautoplayTimeLeftevent in particular provides the time remaining, which is exactly what you’d need to drive a synchronized progress animation.This is achievable with custom code, but it’s not trivial – you’d need to hook into the Swiper instance and manage CSS animations or use Swiper’s progress values to update a custom element.
If this is an important feature for your project, I’d suggest submitting it as a feature request. The team does track these for future development consideration.
-
Gotcha! Thank you George!
-
Ok, you are welcome!
- You must be logged in to reply to this topic.