Bootstrap: Pausing on Slid event is not working unless carousel class has slider

Created on 13 Apr 2016 · 8Comments · Source: twbs/bootstrap

http://codepen.io/ethan1341/pen/BKrogw
I need to have not have a slider class on my bootstrap carousel because I am running my app from a TV with basically no processor(can't have the transition). My problem is if I don't have slide as the carousel class the pause event which is inside the slid event will not work EVEN THOUGH THE EVENT FIRES. However if I add the class slide the carousel will pause(inside of the slid event). It confuses me because the event fires when the slider has the slide class or doesn't(it does not pause when it doesn't). Sorry if my explanation isn't clear English is not my primary language. My code pen will make it more clear. I tried leaving slide and taking out all the animations but it does not render properly

js v3

Source

ethan1341

Most helpful comment

If you set:

$('#myCarousel').on('slid.bs.carousel', function() {
    setTimeout(function(){$('#myCarousel').carousel('pause');}, 1)
});

It will work. See https://jsfiddle.net/zt7xhutj/. (BTW, I fixed lmvtfy errors)

I can't tell you why it works, but it does.

I'm not sure that this is intended behavior though.

RyanZim on 13 Apr 2016

🎉1 😄1 👍1

All 8 comments

Hi @ethan1341!

You appear to have posted a live example (http://codepen.io/ethan1341/pen/BKrogw.html), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

line 8, column 1 thru column 6: Stray start tag head.
line 9, column 1 thru column 22: Attribute charset not allowed on element meta at this point.
line 9, column 1 thru column 22: Element meta is missing one or more of the following attributes: content, itemprop, property.
line 10, column 1 thru column 7: Element title not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
line 11, column 1 thru column 99: Element link is missing required attribute property.
line 12, column 1 thru column 105: Element link is missing required attribute property.
line 15, column 1 thru column 7: Stray end tag head.
line 16, column 1 thru column 6: Start tag body seen but an element of the same type was already open.
line 60, column 1 thru column 7: Stray end tag body.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

twbs-lmvtfy on 13 Apr 2016

@ethan1341 You're using Bootstrap v3.0.3, which is outdated. Please upgrade to v3.3.6.

cvrebert on 13 Apr 2016

https://jsfiddle.net/ethan1341/1ko0ngu7/3/ sorry I posted this realized my format wasn't correct working on it now this is the the example with correct libraries

ethan1341 on 13 Apr 2016

Hi @ethan1341!

You appear to have posted a live example (https://fiddle.jshell.net/ethan1341/1ko0ngu7/1/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

line 107, column 5 thru column 11: Element title not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
line 108, column 1 thru column 6: Start tag body seen but an element of the same type was already open.
line 154, column 1 thru column 7: Stray end tag body.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

twbs-lmvtfy on 13 Apr 2016

If you set:

$('#myCarousel').on('slid.bs.carousel', function() {
    setTimeout(function(){$('#myCarousel').carousel('pause');}, 1)
});

It will work. See https://jsfiddle.net/zt7xhutj/. (BTW, I fixed lmvtfy errors)

I can't tell you why it works, but it does.

I'm not sure that this is intended behavior though.

RyanZim on 13 Apr 2016

🎉1 😄1 👍1

Hi @RyanZim!

You appear to have posted a live example (https://fiddle.jshell.net/ma0hktho/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

JSFiddle inserts the contents of its "HTML" pane within <body>...</body> tags, so you cannot include your own <body> tag in your JSFiddle.
line 105, column 3 thru column 8: Start tag body seen but an element of the same type was already open.
line 150, column 1 thru column 7: Saw an end tag after body had been closed.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

twbs-lmvtfy on 13 Apr 2016

Could @cvrebert or @patrickhlauke please remove the awaiting reply label?

RyanZim on 6 May 2016

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team