Pagination buttons for slider component

Hello guys,

I’m building the following design from Figma in Webflow:

  1. Slider button
  2. Slide bullet
  3. Slide progress bar
  4. Slider content

What I’m trying to achieve is to that when a slide is active the progress bar inside the slide bullet grows until it changes to the next slide and the top text of the bullet changes in size and colour.

At the moment, the progress bar is for the whole slider and all the slides so that it grows depending on the slider you’re in.

I guess my question here is how to achieve something like this because I know I can do it with animations what I don’t know is how to apply the animation to the bullet because the slider component only creates one instance of that.

Hey @aaron! We may be able to achieve this with the Swiper API. Can you share the project’s read-only link so I can take a look?

Thanks @Support-Luis

Here’s the link although I created the slider using the slider-component but I don’t have anything on it just yet.

The page where that slider is supposed to be is the one called ‘Pagos Felxibles’ inside the folder called ‘Merchant’

Hopefully this makes sense.

https://preview.webflow.com/preview/official-sequra?utm_medium=preview_link&utm_source=designer&utm_content=official-sequra&preview=c573c8c6ecb0054da129489f618b507b&pageId=67967a8ad4fff082bb76b3b9&locale=es&workflow=preview

Thank @aaron! It would be best if you could add some items to the slider so we can have a functional prototype.

Can you let me know when you’ve added some items?