Horizontal carousel indicators (dashes): how to alternate light and dark mode from slide to slide?

Hi there,

do I understand it right and the horizontal indicators (dashes) are either light or dark troughout the complete carousel or can I adapt the color to the individual slides, i.e. alternate light and dark from slide to slide?

I have photos here in a carousel, they are very different, if I only use light or dark indicators in the whole carousel, they are as good as invisible in some photos. it would be great if i could adjust the indicators image by image, slide by slide. Is that even possible?

Merci!
Tom

Your post has changed from the original. Are you looking for something like this:

CleanShot 2024-06-04 at 10.37.13

1 Like

Hi Jerry,

thank you very much for your answer. I actually mean these horizontal indicators here:

Bildschirmfoto 2024-06-04 um 09.17.28

Is there a way to adjust them to the respective picture and change them from picture to picture or are they exclusively either black or white throughout the whole carousel?

But I would also love to know how you gave the arrows different colors! :upside_down_face:

Merci!
Tom

Ok. Changing the question created some confusion :grin:
Something like this?

CleanShot 2024-06-04 at 12.12.21

1 Like

Exactly that! How can I individually adjust the appearance of the indicators for individual slides?

Hi there,
I do understand how to customize the general appearance. But how do you adjust it individually for individual slides?

Add this to your page - footer:

<script>
 document.addEventListener('DOMContentLoaded', function () {
  const carousels = document.querySelectorAll('.my-fancy-carousel');

  const colors = ['red', 'blue', 'yellow', 'green'];

  function updateIndicatorColors(carousel) {
    const indicators = carousel.querySelectorAll('.carousel-indicators li');
    const carouselItems = carousel.querySelectorAll('.carousel-item');
    const activeItem = carousel.querySelector('.carousel-item.active');
    const activeIndex = Array.from(carouselItems).indexOf(activeItem);
    const color = colors[activeIndex];
    indicators.forEach(indicator => {
      indicator.style.transition = 'background-color 0.5s ease';
      indicator.style.backgroundColor = color;
    });
  }

  carousels.forEach(carousel => {
    carousel.addEventListener('slid.bs.carousel', () => updateIndicatorColors(carousel));
    updateIndicatorColors(carousel);
  });
});  
</script>

How It Works:

  1. Assign the class .my-fancy-carousel to your carousel (or any other preferred name).
  2. Set different colors for each slide. In the example, there are four slides, each featuring a unique color. The script automatically updates the color as you switch slides.

Extra Feature:
I’ve added a sleek smooth transition for the indicators to enhance the visual effect when changing slides.

2 Likes

Thanks a lot, Jerry, you are the best!!!