Home/ Questions/Q 7905539
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T10:31:07+00:00

Twitter Bootstrap Version: 2.0.3 Example HTML code: <!DOCTYPE html> <html dir=ltr lang=en-US xmlns:og=http://opengraphprotocol.org/schema/> <head>

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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
        });
    });
});​
    • 0