Bootstrap JavaScript 轮播不会停止循环

Question

提问by its_me

Twitter Bootstrap Version:2.0.3

Twitter 引导程序版本：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 pausedmode, 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.

问题：如您所见，我启用了paused模式并禁用了cycle。但是，当我单击轮播的左侧或右侧控件时，轮播会在 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

回答by dgabriel

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
        });
    });
});?

Answer 2

回答by Yann Thomas-Gérard

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

要禁用循环，一种可行的解决方案是将 data-interval="false" 添加到 carousel 容器：

<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

回答by diemondtank

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

Answer 4

回答by ses

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

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

Answer 5

回答by Clint C.

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 6

回答by its_me

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 carousel 的 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)例如错误。

Answer 7

回答by francischan

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) 并不意味着“是的，暂停它”， pause(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 eis true, this.paused = truewon'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为真，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=falseto prevent "mouseleave" event to recycle. bootstrap itself uses it this way, it can be seen here

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

Answer 8

回答by user3877963

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

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

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

Answer 9

回答by aerospace

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

Answer 10

回答by N A

I have some problem too doing Stop bootstrap Carouselfrom auto playing. I checked bootstrap.jsfile 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:

我在Stop bootstrap Carousel自动播放时也遇到了一些问题。我检查了bootstrap.js文件，发现了与 carousel 相关的代码，然后我删除了另一个 js。在新的 js 文件中，我从所有代码中复制，然后将 Carousel 变量更改为Carousel_n（因为可以将其更改为您想要的任何内容）。在最后一行代码中，最重要的事情是：

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

I change carouselto carousel_n.

我carousel改为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.

当然，它确实有效。

Bootstrap JavaScript 轮播不会停止循环

提问by its_me

回答by dgabriel

回答by Yann Thomas-Gérard

回答by diemondtank

回答by ses

回答by Clint C.

回答by its_me

回答by francischan

回答by user3877963

回答by aerospace

回答by N A

相关推荐

最近更新

标签

Bootstrap JavaScript 轮播不会停止循环

提问by its_me

回答by dgabriel

回答by Yann Thomas-Gérard

回答by diemondtank

回答by ses

回答by Clint C.

回答by its_me

回答by francischan

回答by user3877963

回答by aerospace

回答by N A

相关推荐

Javascript jQuery $('#div').show().delay(5000).hide(); 不起作用

Javascript 注销后防止后退按钮

Javascript 使用 Express 从 NodeJS 服务器下载文件

Javascript 为 jQuery Sparklines 插件的每个值添加字符串标签

相关推荐

最近更新

标签