Bug in Bootstrap Carousel on mobile (this is NOT a Bootstrap Studio bug)

Wanted to make people aware of this bug I recently discovered in the Bootstrap carousel. This is NOT a bug in Bootstrap Studio, but rather an issue involving the failure of the carousel to recognize a touch event to initialize the carousel.

Basically, if you have a Bootstrap carousel that is not set to auto cycle and you’re on a mobile device, you should be able to swipe to advance to the next slide, but you can’t. You have to TAP on the next button first, and only THEN will swiping work.

The bug has been reported, but apparently there’s no fix yet.

It works with javascript
have a look

What happens if you have multiple carousels on the same page? I have seven carousels on one page.

Would this script work if you used a class instead of an ID? That way, you could add the class to multiple carousels?

@printninja

If you set the auto cycle option for the carousels to never in the options panel, you can add this to a javascript file. It will work with one or more carousels on the page

const carouselElements = document.querySelectorAll('[data-bs-ride="false"]');
carouselElements.forEach((element) => {
  const carousel = bootstrap.Carousel.getOrCreateInstance(element);
  carousel.pause();
});

I updated the example above, you can take a look again if you want

2 Likes

@kuligaposten
This fixes it. Wow! Thank you so much. You should be working for Bootstrap!

@printninja

You are welcome,
go to work is in past time for me. It’s better to spend some time in the beach pub. It is 35°C here, go swimming in the ocean now and then that’s all the work I do nowadays

You seem capable of doing things nobody else can do. This carousel issue has existed for some time now, and there has been much discussion on a few websites, but no solution until I posted it here, and you created your JS solution. You have a remarkable skill-set.

But I also get it… you’re retired and want to relax and enjoy life. I envy you in that regard. I am sometimes sick of the day-in, day-out endless grind of solving other people’s problems.

1 Like