# Pagination buttons for slider component

**URL:** <https://forum.finsweet.com/t/pagination-buttons-for-slider-component/4154>\
**Category:** Slider\
**Tags:** component-slider\
**Created:** [January 27, 2025, 2:42pm UTC](https://forum.finsweet.com/t/pagination-buttons-for-slider-component/4154 "2025-01-27T14:42:17Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![aaron](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/aaron/32/738_2.png) [@aaron](https://forum.finsweet.com/u/aaron)\
**Post date:** [January 27, 2025, 2:42pm UTC](https://forum.finsweet.com/t/pagination-buttons-for-slider-component/4154/1 "2025-01-27T14:42:17Z")

</div>

Hello guys,

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

 ![CleanShot 2025-01-27 at 14.32.10@2x](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/6/6add4beb91c43e902eec3d8d938d9c09d7aad95b.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [January 29, 2025, 5:03pm UTC](https://forum.finsweet.com/t/pagination-buttons-for-slider-component/4154/2 "2025-01-29T17:03:18Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![aaron](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/aaron/32/738_2.png) [@aaron](https://forum.finsweet.com/u/aaron)\
**Post date:** [January 30, 2025, 2:54pm UTC](https://forum.finsweet.com/t/pagination-buttons-for-slider-component/4154/3 "2025-01-30T14:54:01Z")

</div>

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](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)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [January 30, 2025, 8:20pm UTC](https://forum.finsweet.com/t/pagination-buttons-for-slider-component/4154/4 "2025-01-30T20:20:58Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![aaron](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/aaron/32/738_2.png) [@aaron](https://forum.finsweet.com/u/aaron)\
**Post date:** [February 19, 2025, 2:04pm UTC](https://forum.finsweet.com/t/pagination-buttons-for-slider-component/4154/5 "2025-02-19T14:04:55Z")

</div>

Hey @Support-Luis

There is content in the slider now. Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [February 19, 2025, 3:58pm UTC](https://forum.finsweet.com/t/pagination-buttons-for-slider-component/4154/6 "2025-02-19T15:58:06Z")

</div>

Thank you @aaron!

Can you please test this and let me know what you think?

```html
<script>
  window.fsComponents = window.fsComponents || [];
  window.fsComponents.push([
    'slider',
    (sliderInstances) => {
      console.log('slider Successfully loaded!');

      const [sliderInstance] = sliderInstances;

      const delay = sliderInstance.params.autoplay.delay; // 500ms
      const bullets = document.querySelectorAll('.slider_pagination-button');

      sliderInstance.on('slideChange', function (e) {
        let activeIndex = e.realIndex;

        bullets.forEach((bullet, i) => {
          const progressBar = bullet.querySelector('.slider_pagination-bar');
          if (i === activeIndex) {
            progressBar.style.width = '100%';
            progressBar.style.transition = `width ${delay / 1000}s linear`;
          } else {
            progressBar.style.width = '0%';
            progressBar.style.transition = 'none';
          }
        });
      });
    },
  ]);
</script>

```

You should add the code to the `</body>` section of the custom code on the page

---

<div class="post-metadata">

**Author:** ![aaron](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/aaron/32/738_2.png) [@aaron](https://forum.finsweet.com/u/aaron)\
**Post date:** [February 27, 2025, 9:59pm UTC](https://forum.finsweet.com/t/pagination-buttons-for-slider-component/4154/7 "2025-02-27T21:59:16Z")

</div>

This works like a charm!

Thank you @Support-Luis !