Question

Twitter Bootstrap版本： 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">…</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：提供bootstrap.css

问题：正如您所看到的，我已启用已暂停模式，并已禁用循环。但是，当我点击旋转木马的左侧或右侧控制时，旋转木马会在鼠标上以默认间隔（每个循环5秒）开始循环。

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

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

Answer 1

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

这是一个解决方案：

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

Answer 2

要禁用循环，一个有效的解决方案是将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

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

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

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

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

Answer 4

我不确定为什么，但主要解决方案对我来说也不起作用。怪异。

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

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

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

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

请参阅carouselpause的文档。

Answer 5

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

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

Answer 6

除了@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) 等错误。

Answer 7

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

interval:false

Answer 8

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

bootstrap carousel的pause（）方法不会以您认为的方式处理其参数。 pause（true）并不意味着“是的，暂停它”，暂停（false）也不意味着“不，不要暂停”。

可以在源代码中看到，

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

  return this
}

github链接here

可以看出，如果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本身使用它，可以看到here

Answer 9

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

body

Answer 10

我在自动播放时遇到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">

当然它真的有效。

Answer 11

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

Bootstrap JavaScript Carousel不会停止循环

11 个答案: