How to differentiate between auto-slide and click slide Bootstrap carousel?

Question

I have carousel control buttons that I am adding an active class to when a new slide is selected.

This is a simple task when someone clicks on one of these buttons, but if I want to incorporate autoplay , this suddenly becomes much more challenging.

Here is the problem:

I can bind slid to a function that adds the active class to my control buttons, and it will be functional, BUT there will be a delay between the start of the slide and the addition of the active class, because slid is fired when the slide is complete.

Fortunately, Bootstrap provides slide , which is fired when a slide is initiated. I could bind slide to a function that adds the active class to the next slide in the list, but then this would cause problems when I try to click a control button for a slide that is out of order.

slide is fired whenever a slide happens, so if someone clicks on a control button that is not in the normal slide order, I will end up with two active buttons.

The only solution I can see currently, is to somehow differentiate between a slide event that is automatically triggered, and one that is triggered by a click.

Any ideas?

Answer 1

Try this:

  $('.carousel').carousel({
  interval: 2000
});