Bootstrap JavaScript Carousel Doesn't Stop Cycling

Question

Twitter Bootstrap Version: 2.0.3

Example HTML code:

<!DOCTYPE html> <html dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/"> <head> <link rel="stylesheet" type="text/css" media="all" href="reddlec/style.css" /> <script type="text/javascript"> $(document).ready(function() { $('.carousel').each(function(){ $(this).carousel({ pause: true, interval: false }); }); }); </script> <script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script> <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script> <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script> </head> <body> <div id="myCarousel" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item">…</div> <div class="item">…</div> <div class="item">…</div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> </body> </html>

CSS: Provided with bootstrap.css

Problem: As you can see, I've enabled paused mode, and disabled cycling. But when I click the carousel's left or right controls, the carousel starts cycling at the default interval (5 seconds per cycle) on mouseleave.

How do I forcefully disable cycling? I want the images to be cycled manually by the user.

You can test the problem live on my test site here.

Paul Sanwald · Accepted Answer · 2012-11-23 22:45:24Z

42

You might want to try removing the "pause" attribute. It's not necessary if you are not automatically cycling through the images. My assumption (and I'm going to look at the bootstrap code to verify) is that when the "mouseleave" event fires, the cycling resumes -- even if it was turned off in the first place. When it resumes, it uses the default speed.

Here is a solution:

$(function() { $('.carousel').each(function(){ $(this).carousel({ interval: false }); }); });

edited Nov 23, 2012 at 22:45

Paul Sanwald

11.4k6 gold badges48 silver badges61 bronze badges

answered May 9, 2012 at 18:08

dgabriel

2,8301 gold badge22 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

its_me Over a year ago

Your other answer worked like a charm, I didn't realize what I was missing there. This one though isn't working as intented, despite removing pause: true, like you said.

dgabriel Over a year ago

Hmmm. So I set up a fiddle here: jsfiddle.net/aB7c6 , and it seems to be working as expected. Even after clicking and leaving the controls multiple times, auto-cycling does not resume. Is there something else in your code that may be affecting this?

its_me Over a year ago

You can check mine live here.

dgabriel Over a year ago

Ah ha - there is an invisible illegal character in your $(document). ready... javascript, just after the very last semi-colon. Some copy-paste cruft, or whatever. Kill that, then try it again.

its_me Over a year ago

I see nothing, no space, no character nothing. I even hand-typed out all that JavaScript code. The problem's still there. I've pasted my document on pastebin. It would be great if you can actually mark it in a screenshot or let me know what it actually is or looks like. Thanks.

|

Yann · Accepted Answer · 2013-03-06 14:48:23Z

To disable cycling, one working solution is to add data-interval="false" to the carousel container:

<div id="myCarousel" class="carousel slide" data-interval="false"> <div class="carousel-inner"> <div class="active item">toto</div> <div class="item">tata</div> <div class="item">tutu</div> </div> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div>

Just to highlight to anyone else the NB part of this is data-interval="false" and it works on BS 2.3.2, no JS needed.
If you're testing this in-browser, note this data attribute needs to be set on page load.

diemondtank · Accepted Answer · 2012-11-15 03:29:15Z

I just came up with a solution for this issue. None of the above worked for me, but it did get me to look at the bootstrap code. I believe the reason for this bug is in the bootstrap-carousel.js file in the defaults object:

 $.fn.carousel.defaults = { interval: 5000 , pause: 'hover' }

After the carousel slides, it ends up reverting to these default values. If you want the carousel to not slide and only be controlled by the user, you can change the defaults object to have an interval of false. Hope this helps.

 $.fn.carousel.defaults = { interval: false , pause: 'hover' }

ses · Accepted Answer · 2013-12-27 21:21:17Z

10

<div id="carousel-example-generic" class="carousel slide" data-wrap="false">

http://getbootstrap.com/javascript/#carousel

answered Dec 27, 2013 at 21:21

ses

13.4k32 gold badges133 silver badges242 bronze badges

1 Comment

Dorian Over a year ago

data-wrap="false", data-interval="false", data-pause="true", etc.. that's the way I was looking for

Stephan Schielke · Accepted Answer · 2016-06-26 21:10:04Z

I'm not sure why but the main solution didn't work for me either. Weird.

To fix my problem I did the following code.

$('.carousel').carousel({interval: false}); $(document).on('mouseleave', '.carousel', function() { $(this).carousel('pause'); });

See the documentation for carouselpause.

its_me · Accepted Answer · 2012-05-10 02:50:38Z

Apart from what @dgabriel suggests, do make sure that the JavaScript call that initializes Bootstrap carousel is AFTER the <script> references to jQuery, bootstrap-transition.js, and bootstrap-carousel.js, pretty much like this:

<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script> <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script> <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.gallery-carousel').each(function(){ $(this).carousel({ interval: false }); }); }); </script>

This makes sure that the carousel works as intended (errors like Uncaught ReferenceError: $ is not defined (anonymous function) for example.

aerospace · Accepted Answer · 2013-07-15 08:44:06Z

I tried everything, but nothing worked. I solved the issue in changing files bootstrap.min.js & bootstrap.js. You have to looking for "carousel.defaults" with Ctrl+F in these files and replace what it contains by:

interval:false

francischan · Accepted Answer · 2013-12-31 09:48:05Z

I think @dgabriel's answer should work, because :

bootstrap carousel's pause() method doesn't treat its argument the way you think it does. pause(true) doesn't mean "yes, pause it", nor does pause(false) mean "no, don't pause it".

it can be seen in the source code,

Carousel.prototype.pause = function (e) { e || (this.paused = true) ... this.interval = clearInterval(this.interval) return this }

github link here

as can be seen, if e is true, this.paused = true won't execute. so when event "mouseleave" fires, cycle() method still see "paused == false" and setInterval is executed again, so your carousel won't stay still.

// mouseleave event fires using cycle() with no arguments .on('mouseleave', $.proxy(this.cycle, this)) // so when cycle() is called, this.paused == false. Carousel.prototype.cycle = function (e) { e || (this.paused = false) this.interval && clearInterval(this.interval) // set interval == false to prevent setInterval this.options.interval && !this.paused && (this.interval = setInterval($.proxy(this.next, this), this.options.interval)) return this }

to pause, use .pause() and interval=false to prevent "mouseleave" event to recycle. bootstrap itself uses it this way, it can be seen here

josliber · Accepted Answer · 2015-07-16 22:46:39Z

Actually, changing the defaults in bootstrap-carousel.js as follows helped me.

Carousel.DEFAULTS = { interval: false, pause: 'hover', wrap: false }

meJustAndrew · Accepted Answer · 2017-08-18 11:56:06Z

I have some problem too doing Stop bootstrap Carousel from auto playing. I checked bootstrap.js file and I have found codes related to carousel then I remove the another js. In new js file I make copy from all codes and then I change Carousel variable to Carousel_n(because it's possible to change it to anything you want). In last line of codes, the most important thing to do is:

 { $('[data-ride="carousel"]').each(function () }

I change carousel to carousel_n.

for html I only changed:

<div id="Carousel" class="carousel slide" data-ride="carousel">

to

<div id="Carousel" class="carousel slide" data-ride="carousel_n">

and ofcourse it really worked.

ykaragol · Accepted Answer · 2016-10-26 07:07:47Z

-1

$('your-carousel').carousel({ pause: true, interval: false });

edited Oct 26, 2016 at 7:07

ykaragol

6,2413 gold badges32 silver badges59 bronze badges

answered Oct 25, 2016 at 13:12

Harapriya sahoo

1

Collectives™ on Stack Overflow

Bootstrap JavaScript Carousel Doesn't Stop Cycling

11 Answers 11

7 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

7 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related