How to change active slider dot colors for second slider

Finsweet Components Slider
1

I purchased a slider component. I need to have 2 instances of the same slider but each has different colors for the active slider dot. How do i change the color for the active slider dot on Slider 2?

2

Hey @mindandmakr!

We’ll need a bit of custom code to make this work. Each slider needs its own active bullet class — by default, it’s is-bullet-active.

In this example, I’ve duplicated a slider. The top one uses the is-bullet-active-red class, and the bottom one uses is-bullet-active-green.

Screenshot 2025-04-25 at 12.46.42
Screenshot 2025-04-25 at 12.46.423420×1958 394 KB

Since both sliders share the same class and instance name, we need to use some JS to remove the red active class from the second slider and apply the green one instead. We’ll also update the bulletActiveClass on that second slider instance.

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

      const secondSlider = sliderInstances[1]; // target second instance

      // Update active bullet class
      const pagination = secondSlider.params.pagination;
      const bullets = pagination.el?.children || [];

      for (const bullet of bullets) {
        if (bullet.classList.contains('is-bullet-active-red')) {
          bullet.classList.replace('is-bullet-active-red', 'is-bullet-active-green');
        }
      }

      // Change the bulletActiveClass for slider 2
      secondSlider.params.pagination.bulletActiveClass = 'is-bullet-active-green';

      // Update slider to apply the new class
      secondSlider.update();
    },
  ]);
</script>

This code should go in the </body> of the page, just change the class names to yours, and you should be good to go!

Let me know if you need any help!