0

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

miller the gorilla
  • 860
  • 1
  • 7
  • 19

3 Answers3

0

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... */ });
Arnav Thorat
  • 3,078
  • 3
  • 8
  • 33
  • That doesn't answer my question, I am afraid. I have checked the documentation, and there is no list of events that pertain to the click on the carousel back and forward buttons, which is what I am after. I would like to use removeEventListener, but cannot find the event name nor the method that is called. – miller the gorilla Feb 06 '22 at 13:51
  • Sorry about my question. However, there is a similar question to what you have on Stack Overflow at [this link](https://stackoverflow.com/questions/14977392/bootstrap-carousel-remove-auto-slide?rq=1). – Arnav Thorat Feb 06 '22 at 20:00
  • Thanks Amav, any help is always appreciated. The link you provided in your comment may actually be what I'm looking for - to stop the carousel from auto-sliding, remove the bs-ride attr. – miller the gorilla Feb 07 '22 at 13:21
  • unfortunately not. Removing the data-bs-ride="carousel" prevents the carousel from being constructed. My problem is that I am randomising an array of elements, which works fine, until I use the prev and next button, at which point, even though the correct element is initially displayed, the bootstrap event handler calls 'cycle' and and then the one sequentially following that image is displayed, not the element following it from the randomised array, hence the desire to remove the eventhandler. – miller the gorilla Feb 07 '22 at 13:27
  • Okay, I'll try and find some more links that might help! – Arnav Thorat Feb 07 '22 at 20:25
  • Thanks for all your help Amav Thorat! – miller the gorilla Feb 08 '22 at 20:48
0

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

bh9999
  • 3
  • 2
  • yes, I have. Unfortunately bootstrap uses eventdelegation, so it has a listener on the document that listens for events and then passes them to the correct location. The bootstrap code has a class 'EventHandler' which might help remove the listener, but I can't access it, as it is not public, I think. EventHandler lives at https://github.com/twbs/bootstrap/blob/main/js/src/dom/event-handler.js, and I am not sure how to import a module into non module code. – miller the gorilla Feb 07 '22 at 13:31
0

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).

miller the gorilla
  • 860
  • 1
  • 7
  • 19