Question

185

Bootstrap JavaScript Carousel Doesn't Stop Cycling

rated 0 times [ 187] [ 2] / answers: 1 / hits: 91185 / 12 Years ago, wed, may 9, 2012, 12: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>

<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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lincolnx

Add To Favorites

Follow

Total Points: 602

Total Questions: 90

Total Answers: 94

Location: Saint Lucia

Member since Wed, Feb 8, 2023

1 Year ago

lincolnx questions

1 csv-parse is throwing Invalid Opening Quote: a quote is found inside a field at line

Thu, Jan 27, 22, 00:00, 2 Years ago

1 React: Calling Function From Another Component (Specific Example)

Tue, Jul 27, 21, 00:00, 3 Years ago

1 How to implement back button in Angular for navigating previous page?

Mon, Dec 21, 20, 00:00, 3 Years ago

1 How can I disable CORS for a single route in Express without rewriting all of my routes?

Sun, Jun 21, 20, 00:00, 4 Years ago

1 How to append inputs with formik in react

Mon, Jun 1, 20, 00:00, 4 Years ago

View All

answered 12 Years ago jazminuniquer · Accepted Answer

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

        });

    });

});