how to remove eventhandler from bootstrap carousel indicator items

Question

I am using bootstrap5 carousel, and I want to fire a custom event when the previous or next indicators are clicked. I want to prevent the default bootstrap event from firing. I have tried a bunch of different techniques, but with no success.

Does anyone know how to do this?

Mtia

Answer 1

Check the official documentation. It has some listeners you can add to your JavaScript.

You need to make sure you add the Bootstrap CDN or the npm module with the JavaScript for it to work, though.

Bootstrap Documentation

Example

const myCarousel = document.querySelector("#myCarousel");
const carousel = new bootstrap.Carousel(myCarousel, { interval: 2500 });

myCarousel.addEventListener("slide.bs.carousel", () => { /* Do something... */ });

Answer 2

Have you tried e.stopPropagation() or e.stopImmediatePropagation()

Answer 3

I found the solution in the end. I was programatically placing bs-slide-to on the next and previous indicators, and this was causing the event handler to fire. So, to stop the bootstrap event handler, remove the bs-slide-to and the bs-slide attributes from the next and previous indicators, and the event won't fire. I removed that, and used a custom event handler and it works fine (I hope).