Bootstrap JavaScript Carousel不会停止循环

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.

您可以在此处测试我的测试网站上的问题。

11 个解决方案

#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. When it resumes, it uses the default speed.

您可能想尝试删除“暂停”属性。如果您没有自动循环显示图像,则没有必要。我的假设(我将查看要验证的引导代码)是当“mouseleave”事件触发时,循环恢复 - 即使它首先被关闭。恢复时,它使用默认速度。

Here is a solution:

这是一个解决方案:

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

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

#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. Hope this helps.

在轮播滑动后,它最终恢复为这些默认值。如果您希望轮播不滑动并且仅由用户控制,则可以将默认对象更改为间隔为false。希望这可以帮助。

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

#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的文档。

#5

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

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

#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 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:$之类的错误未定义(匿名函数))。

#7

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:

我尝试了一切,但没有任何效果。我在更改文件bootstrap.min.js和bootstrap.js时解决了这个问题。您必须在这些文件中使用Ctrl + F查找“carousel.defaults”并将其包含的内容替换为:

interval:false

#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. pause(true) doesn't mean "yes, pause it", nor does pause(false) mean "no, don't pause it".

bootstrap carousel的pause()方法不会像你认为的那样对待它的参数。 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. so when event "mouseleave" fires, cycle() method still see "paused == false" and setInterval is executed again, so your carousel won't stay still.

可以看出,如果e为true,则this.paused = true将不会执行。因此,当事件“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. bootstrap itself uses it this way, it can be seen here

暂停,使用.pause()和interval = false来防止“mouseleave”事件回收。 bootstrap本身就是这样用的,可以在这里看到

#9

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

实际上,更改bootstrap-carousel.js中的默认值如下帮助了我。

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

#10

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:

我也有一些问题,从自动播放停止bootstrap Carousel。我检查了bootstrap.js文件,我找到了与carousel相关的代码,然后我删除了另一个js。在新的js文件中,我从所有代码复制,然后我将Carousel变量更改为Carousel_n(因为它可以将其更改为您想要的任何内容)。在最后一行代码中,最重要的是:

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

I change carousel to carousel_n.

我将轮播更改为carousel_n。

for html I only changed:

对于html我只改变了:

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

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

and ofcourse it really worked.

当然它确实奏效了。

#11

-1

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

#1