Bootstrap JavaScript Carousel不会停止骑自行车
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">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> </body> </html> CSS：提供了bootstrap.css
问题：正如你所看到的，我已经启用了暂停模式，并禁用了循环 。 但是，当我点击传送带的左侧或右侧控件时，传送带开始以鼠标离开的默认间隔（每个周期5秒）循环。
我如何强制禁用单车？ 我希望图像由用户手动循环。
你可以在我的testing网站上现场testing这个问题。
您可能想尝试删除“暂停”属性。 如果您没有自动循环显示图像，则不是必需的。 我的假设（我将要看引导代码来validation）是，当“mouseleave”事件触发时，循环恢复 – 即使它首先被closures。 当它恢复时，它使用默认的速度。
这是一个解决scheme：
$(function() { $('.carousel').each(function(){ $(this).carousel({ interval: false }); }); });
要禁用循环，一个工作解决scheme是将数据间隔=“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">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div>
我刚刚为这个问题提出了一个解决scheme。 以上都没有为我工作，但它确实让我看看自举代码。 我相信这个bug的原因是在默认对象的bootstrap-carousel.js文件中：
$.fn.carousel.defaults = { interval: 5000 , pause: 'hover' }
传送带滑动后，最终恢复为默认值。 如果您希望传送带不滑动并且只能由用户控制，则可以将默认值对象更改为false。 希望这可以帮助。
$.fn.carousel.defaults = { interval: false , pause: 'hover' }
我不知道为什么，但主要的解决scheme也没有为我工作。 奇怪的。
要解决我的问题，我做了下面的代码。
$('.carousel').carousel({interval: false}); $(document).on('mouseleave', '.carousel', function() { $(this).carousel('pause'); });
请参阅carouselpause文档。
<div id="carousel-example-generic" class="carousel slide" data-wrap="false">
除了@dgabriel的build议之外，还要确保初始化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) 。
我尝试了一切，但没有任何工作。 我在更改文件bootstrap.min.js＆bootstrap.js时解决了这个问题。 您必须在这些文件中使用Ctrl + F查找“carousel.defaults”，并通过以下命令replace它包含的内容：
interval:false
我认为@ dgabriel的答案应该工作，因为：
bootstrap carousel的pause（）方法不会像你认为的那样处理它的参数。 暂停（真）并不意味着“是，暂停”，暂停（假）也不意味着“不，暂停”。
在源代码中可以看到，
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本身就是这样使用的，这里可以看到
其实，改变bootstrap-carousel.js的默认值如下所示帮助我。
Carousel.DEFAULTS = { interval: false, pause: 'hover', wrap: false }
我也有一些问题， Stop bootstrap Carousel从自动播放Stop bootstrap Carousel 。 我检查bootstrap.js文件，我发现有关旋转木马的代码，然后我删除了另一个JS。 在新的js文件中，我从所有代码复制，然后将Carouselvariables更改为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">
当然它确实有效。
$('your-carousel').carousel({ pause: true, interval: false });
