Bootstrap JavaScript Carousel不会停止循环

Question

Twitter Bootstrap Version: 2.0.3 Twitter Bootstrap版本： 2.0.3

Example HTML code: 示例HTML代码：

<!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 CSS：随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. 但是，当我单击旋转木马的左侧或右侧控件时，旋转木马会在mouseleave上以默认间隔（每个循环5秒）开始循环。

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 . 您可以在此处测试我的测试网站上的问题。

Answer 1

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. 我的假设（我将查看要验证的引导代码）是当“mouseleave”事件触发时，循环恢复 - 即使它首先被关闭。 When it resumes, it uses the default speed. 恢复时，它使用默认速度。

Here is a solution: 这是一个解决方案：

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

Answer 2

To disable cycling, one working solution is to add data-interval="false" to the carousel container: 要禁用循环，一个有效的解决方案是将data-interval =“false”添加到轮播容器中：

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

Answer 3

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: 我相信这个错误的原因是在defaults对象的bootstrap-carousel.js文件中：

  $.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. 如果您希望轮播不滑动且仅由用户控制，则可以将默认对象更改为间隔为false。 Hope this helps. 希望这可以帮助。

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

Answer 4

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 . 请参阅carouselpause的文档。

Answer 5

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

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

Answer 6

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: 除了@dgabriel建议之外，确保初始化Bootstrap轮播的JavaScript调用是在<script>引用jQuery，bootstrap-transition.js和bootstrap-carousel.js之后，非常像这样：

<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. 这可以确保轮播按预期工作（例如， Uncaught ReferenceError: $ is not defined (anonymous function)类的错误Uncaught ReferenceError: $ is not defined (anonymous function) 。

Answer 7

I tried everything, but nothing worked. 我尝试了一切，但没有任何效果。 I solved the issue in changing files bootstrap.min.js & bootstrap.js. 我在更改文件bootstrap.min.js和bootstrap.js时解决了这个问题。 You have to looking for "carousel.defaults" with Ctrl+F in these files and replace what it contains by: 您必须在这些文件中使用Ctrl + F查找“carousel.defaults”并将其包含的内容替换为：

interval:false

Answer 8

I think @dgabriel's answer should work, because : 我认为@ dgabriel的答案应该有效，因为：

bootstrap carousel's pause() method doesn't treat its argument the way you think it does. bootstrap carousel的pause（）方法不会像你认为的那样对待它的参数。 pause(true) doesn't mean "yes, pause it", nor does pause(false) mean "no, don't pause it". pause（true）并不意味着“是的，暂停它”，暂停（false）也不意味着“不，不要暂停”。

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 github链接在这里

as can be seen, if e is true, this.paused = true won't execute. 可以看出，如果e为true，则this.paused = true将不会执行。 so when event "mouseleave" fires, cycle() method still see "paused == false" and setInterval is executed again, so your carousel won't stay still. 所以当事件“mouseleave”触发时，cycle（）方法仍然会看到“paused == false”并再次执行setInterval，因此您的轮播将不会保持静止。

// 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. 暂停，使用.pause()和interval=false来防止“mouseleave”事件回收。 bootstrap itself uses it this way, it can be seen here bootstrap本身就是这样用的，可以在这里看到

Answer 9

Actually, changing the defaults in bootstrap-carousel.js as follows helped me. 实际上，如下更改bootstrap-carousel.js中的默认值对我有帮助。

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

Answer 10

I have some problem too doing Stop bootstrap Carousel from auto playing. 我也有一些问题，从自动播放Stop bootstrap Carousel 。 I checked bootstrap.js file and I have found codes related to carousel then I remove the another js. 我检查了bootstrap.js文件，我找到了与carousel相关的代码，然后我删除了另一个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). 在新的js文件中，我从所有代码复制，然后我将Carousel变量更改为Carousel_n （因为它可以将其更改为您想要的任何内容）。 In last line of codes, the most important thing to do is: 在最后一行代码中，最重要的是：

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

I change carousel to carousel_n . 我将carousel carousel_n更改为carousel_n 。

for html I only changed: 对于html我只改变了：

<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. 当然它确实奏效了。

Answer 11

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

Bootstrap JavaScript Carousel不会停止循环

问题描述

11 个解决方案

解决方案1
41 已采纳 2012-05-09 18:08:12

解决方案2
35 2013-03-06 14:48:23

解决方案3
29 2012-11-15 03:29:15

解决方案4
9 2012-10-11 18:01:44

解决方案5
9 2013-12-27 21:21:17

解决方案6
3 2012-05-10 02:50:38

解决方案7
1 2013-07-15 08:44:06

解决方案8
1 2013-12-31 09:42:41

解决方案9
1 2015-07-16 21:14:50

解决方案10
0 2017-08-18 10:37:04

解决方案11
-1 2016-10-25 13:12:11

Bootstrap JavaScript Carousel不会停止循环

问题描述

11 个解决方案

解决方案1 41 已采纳 2012-05-09 18:08:12

解决方案2 35 2013-03-06 14:48:23

解决方案3 29 2012-11-15 03:29:15

解决方案4 9 2012-10-11 18:01:44

解决方案5 9 2013-12-27 21:21:17

解决方案6 3 2012-05-10 02:50:38

解决方案7 1 2013-07-15 08:44:06

解决方案8 1 2013-12-31 09:42:41

解决方案9 1 2015-07-16 21:14:50

解决方案10 0 2017-08-18 10:37:04

解决方案11 -1 2016-10-25 13:12:11

解决方案1
41 已采纳 2012-05-09 18:08:12

解决方案2
35 2013-03-06 14:48:23

解决方案3
29 2012-11-15 03:29:15

解决方案4
9 2012-10-11 18:01:44

解决方案5
9 2013-12-27 21:21:17

解决方案6
3 2012-05-10 02:50:38

解决方案7
1 2013-07-15 08:44:06

解决方案8
1 2013-12-31 09:42:41

解决方案9
1 2015-07-16 21:14:50

解决方案10
0 2017-08-18 10:37:04

解决方案11
-1 2016-10-25 13:12:11