34

Twitter 引导版本： 2.0.3

示例 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">…&lt;/div>
    <div class="item">…&lt;/div>
    <div class="item">…&lt;/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：随bootstrap.css提供

问题：如您所见，我启用了暂停模式，并禁用了循环。但是，当我单击轮播的左或右控件时，轮播会在鼠标离开时以默认间隔（每个周期 5 秒）开始循环。

如何强制禁用骑行？我希望用户手动循环图像。

您可以在我的测试站点上实时测试问题。

4

11 回答 11

41

您可能想尝试删除“暂停”属性。如果您不自动循环浏览图像，则没有必要。我的假设（我将查看引导代码来验证）是，当“mouseleave”事件触发时，循环会恢复——即使它一开始就被关闭了。当它恢复时，它使用默认速度。

这是一个解决方案：

$(function() {
    $('.carousel').each(function(){
        $(this).carousel({
            interval: false
        });
    });
});​
于 2012-05-09T18:08:12.790 回答
38

要禁用循环，一种可行的解决方案是将 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>
于 2013-03-06T14:48:23.523 回答
29

我刚刚想出了一个解决这个问题的方法。以上都没有对我有用，但它确实让我查看了引导代码。我相信这个错误的原因是在默认对象的 bootstrap-carousel.js 文件中：

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

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

  $.fn.carousel.defaults = {
    interval: false
  , pause: 'hover'
  }
于 2012-11-15T03:29:15.123 回答
11 
<div id="carousel-example-generic" class="carousel slide" data-wrap="false">

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

于 2013-12-27T21:21:17.537 回答
9

我不知道为什么，但主要的解决方案对我也不起作用。奇怪的。

为了解决我的问题，我执行了以下代码。

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

$(document).on('mouseleave', '.carousel', function() {

    $(this).carousel('pause');
});

请参阅carouselpause的文档。

于 2012-10-11T18:01:44.443 回答
3

除了@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>

这可以确保轮播按预期工作（Uncaught ReferenceError: $ is not defined (anonymous function)例如错误。

于 2012-05-10T02:50:38.437 回答
1

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

interval:false
于 2013-07-15T08:44:06.560 回答
1

我认为@dgabriel 的回答应该有效，因为：

bootstrap carousel 的 pause() 方法不会像您认为的那样处理它的参数。pause(true) 并不意味着“是的，暂停它”，pause(false) 也不意味着“不，不要暂停它”。

在源代码中可以看到，

Carousel.prototype.pause = function (e) {
  e || (this.paused = true)
  ...
  this.interval = clearInterval(this.interval)

  return this
}

github链接在这里

可以看出，如果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
}

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

于 2013-12-31T09:42:41.003 回答
1

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

Carousel.DEFAULTS = {
    interval: false,
    pause: 'hover',
    wrap: false
  }
于 2015-07-16T21:14:50.697 回答
0

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

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

我carousel改为carousel_n.

对于 html 我只改变了： 

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

到

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

当然，它确实有效。

于 2017-08-18T10:37:04.893 回答
-1 
$('your-carousel').carousel({
pause: true,
interval: false
});
于 2016-10-25T13:12:11.267 回答