Inconsistent carousel .pause() bahaviour

[mozi-h]

Whem pausing a carousel using .pause(), I see inconsistent behaviour.

I expect what happens on Desktop Firefox:

• Auto-sliding off.
• Manual sliding works
• Manual sliding does not resume auto-sliding

Under some conditions, manual sliding does resume auto-sliding. So far this happens with one of these conditions:

• Touch device (even Firefox simulated or Firefox on Android)
• Chromium (Edge and Chrome tested)
• Even weirder: jsfiddle on Firefox (even though Firefox Desktop usually is the only "normal" one).

So here are my questions:

• What is the intended behaviour?
• If manual sliding should always resume auto-sliding, it's a Firefox problem. But how could this be achieved? Or perhaps a "heavier" option to .pause() which disables the manual sliding options too might be handy (.dispose() seems to be very "light")?

When calling .pause() on a Carousel object, mobile users will still unpause after an interaction.

Here's a jsfiddle: https://jsfiddle.net/4nqr1od2/
As mentioned above, I see inconsistencies on jsfiddle vs local server.
Note that the carousel starts as auto-sliding and has a 1s interval. The Button indicates which action should be expected to be performed on click; the actual performed action based on carousel._isPaused is logged and highlighted.

[XhmikosR]

The default behavior is to pause on 'hover focus'. Are you sure you don't want to use 'click' here?

[mozi-h]

Pause on hover or focus for mobile users is what I need, coincidentally. Even if not, I would expect the auto-pause to not interfere with a manually triggered pause.
In fact, a hover doesn't interfere with it; only a touch-focus or (touch- / click-) navigation using indicators or the button arrows.

I feel the behaviour is not as expected and inconsistent.
It should either be clarified in the documentation (if this was intended); or adjusted.

Sorry for the weird label btw

[AndlerRL]

I'm experiencing same issue here with bootstrap 4.6.0:

• When I initiate carousel, I use an id for scope and defining these options:

  $('#my-carousel').carousel({
      interval: false,
      pause: true,
      wrap: false
  })

• I control navigation manually and each time that we finish scroll slid.bs.carousel event, I'm pausing the auto-scroll:

  $('#carousel').on('slid.bs.carousel', ({ target }) => {
      $(target).carousel('pause');
  });

  And when user do a mouseleave, touchend or blur:

  $carousel.on('mouseleave touchend blur', ({ target }) => {
      $(target).carousel('pause');
  });

While we do minimal navigation (like scrolling 2 - 3 times), auto-scroll doesn't happen but, the more user interact with the carousel, the change gets higher and higher and ends up in a state where it can scroll between 2-5 times at the same moment, like accumulated yield line codes for this auto-scroll.

This carousel is attached with tab navigation but both functions doesn't seems to collide, saw no event triggering thanks to carousel.

Also tried with a different scope, using always $('#my-carousel') instead of target, same result. Also with/out pause and wrap values, doesn't affect at all and also tried with a different approach--datasets and no, same result.

I have another function that calls carousel(${carouselItemIndex}) but this happens when we trigger slide.bs.carousel and this is before slide completes (there are only 2 carousel items, always) and with that, I'm even pausing it as well and the above event also pause it... doesn't respect it.

And no, I don't have another carousel with a scope of $('.carousel') on another file that goes along with the one that I have this code, even if that is the case, slid.bs.carousel should stop it after auto-scroll.

Any ideas?