Bootstrap: Carousel without `data-ride` starts sliding after `data-slide`

[iNaD]

Hi guys,

using the carousel of Bootstrap 4 without data-ride causes unexpected behavior if you triggered a slide via data-slide annotated elements. This seems to trigger the .carousel('cycle') behavior instead of just sliding to the next or previous slide. I currently don't have the time to dig into the javascript code of the carousel, but on the first sight the methods look good and there is a check whether the carousel is cycling or not. So this seems to be a bit odd.

Reproducible example: http://www.bootply.com/uhiBQulEfU

OS: Windows 10 Home
Browser: Google Chrome Version 53.0.2785.143 m
Bootstrap: 4.0.0-alpha.5

[bardiharborow]

Your test case is using 4.0.0-alpha.4, not alpha.5. Also, JSBin would be preferable.

[iNaD]

Hi, sorry for the late response.

JSBin example with alpha-5: https://jsbin.com/koguxuweka/edit?html,output

After clicking on the next or previous arrow, just wait for the timeout (5s afaik) and the carousel will switch to the next slide. If you click on the left arrow, it will not even cycle in the same direction (slide-1 - slide-3 - slide-2 - slide-1) but in the default direction(slide-1 - slide-2 - slide-3 - slide-1).

[Johann-S]

I don't see any issue with our last dist files see : https://codepen.io/Johann-S/pen/pwbmrz

[iNaD]

I used the dist files of v4-dev branch and created a codepen reflecting my use (https://codepen.io/theiNaD/pen/bRqpYY).

As you can see it doesn't ride on load (correct behaviour when you don't have data-ride="carousel" in place). After clicking on the next or previous button (just barely visible, but they are on the left and right side) the slide changes. Wait some time and the carousel will keep riding itself instead of just moving to a single item. So this is still an issue.

[TheBuzzer67]

data-ride="carusel" or data-ride="carousel"??

[iNaD]

Do you even understand what I want to achieve?

1. The carousel shouldn't ride itself. So the date-ride="carousel" doesn't matter in general, because it isn't even used (there is no data-ride in my source code examples
2. The user should be able to use buttons having a data-slide attribute to slide the carousel
3. After sliding the carousel MANUALLY the carousel should NOT start to ride itself (as it is the only logical thing in my opinion), because as said in 1. the data-ride attribute isn't set.

Problem is (still with v4-dev branch) that the carousel keeps sliding (in both, current Chrome and Safari on Mac) after the user initiated a single slide operation. As I mentioned in the initial Issue, this seems to be a mistake made in the carousel Javascript (and it seems to be still there in the dev branch). Currently I don't have the time to fix this, else I would dig into this and do a PR.

[Johann-S]

It seems what you're trying to achieve is something like this :

$('#myCarousel').on('slide.bs.carousel', function () {
  $(this).carousel('pause')
})

Because this is how our Carousel works currently, yes if you removed data-ride attribute the carousel won't slide on load event but it will cycle after the first click

For me here it's a feature request because you ask to be able to stop the cycling of our Carousel

[miken32]

In the documentation the default value is listed as "false" and the description says "Autoplays the carousel after the user manually cycles the first item." This suggests that leaving it defaulted or explicitly setting data-ride="false" should prevent automatic cycling completely. If this isn't the case, docs should be clarified.

[blacatena]

I agree with the OP. I'm having the same problem, and the behavior is counter-intuitive, both in what I think most people would want (both what behavior a casual user would expect, and what a designer would target), and what the examples demonstrate. You shouldn't label the action "next" if it's not "next", it's "start" (or "next and start").

At a minimum, if this is the behavior now, I'd hope that you'd add a feature such as "next-and-pause", so developers could control this without resorting to javascript.

Just my opinion, of course.

[blacatena]

Okay, I just figured out that I can achieve the desired behavior by explicitly setting data-interval to false on the carousel. This is the answer the OP was looking for.

[mdo]

Closing as stale, but feel free to reopen if we still need to come back to this.