堆棧內存溢出
  簡體   English   中英

Bootstrap JavaScript Carousel不會停止循環

[英]Bootstrap JavaScript Carousel Doesn't Stop Cycling

 原文  2012-05-09 17:33:10  3   11    javascript/ twitter-bootstrap

問題描述

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提供

問題：正如您所看到的，我已啟用暫停模式，並禁用騎行 。 但是，當我單擊旋轉木馬的左側或右側控件時，旋轉木馬會在mouseleave上以默認間隔（每個循環5秒）開始循環。

我如何強行禁用騎行？ 我希望用戶手動循環圖像。

您可以在此處測試我的測試網站上的問題。

11 個解決方案

解決方案1
 41 已采納  2012-05-09 18:08:12

您可能想嘗試刪除“暫停”屬性。 如果您沒有自動循環顯示圖像，則沒有必要。 我的假設（我將查看要驗證的引導代碼）是當“mouseleave”事件觸發時，循環恢復 - 即使它首先被關閉。 恢復時，它使用默認速度。

這是一個解決方案： 

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

解決方案2
 35  2013-03-06 14:48:23

要禁用循環，一個有效的解決方案是將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
 29  2012-11-15 03:29:15

我剛剛提出了解決這個問題的方法。 以上都沒有為我工作，但它確實讓我看看引導代碼。 我相信這個錯誤的原因是在defaults對象的bootstrap-carousel.js文件中： 

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

在輪播滑動后，它最終恢復為這些默認值。 如果您希望輪播不滑動且僅由用戶控制，則可以將默認對象更改為間隔為false。 希望這可以幫助。 

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

解決方案4
 9  2012-10-11 18:01:44

我不知道為什么，但主要解決方案對我來說也不起作用。 奇怪的。

為了解決我的問題，我做了以下代碼。 

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

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

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

請參閱carouselpause的文檔。

解決方案5
 9  2013-12-27 21:21:17

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

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

解決方案6
 3  2012-05-10 02:50:38

除了@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)類的錯誤Uncaught ReferenceError: $ is not defined (anonymous function) 。

解決方案7
 1  2013-07-15 08:44:06

我嘗試了一切，但沒有任何效果。 我在更改文件bootstrap.min.js和bootstrap.js時解決了這個問題。 您必須在這些文件中使用Ctrl + F查找“carousel.defaults”並將其包含的內容替換為： 

interval:false

解決方案8
 1  2013-12-31 09:42:41

我認為@ dgabriel的答案應該有效，因為：

bootstrap carousel的pause（）方法不會像你認為的那樣對待它的參數。 pause（true）並不意味着“是的，暫停它”，暫停（false）也不意味着“不，不要暫停”。

它可以在源代碼中看到， 

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

  return this
}

github鏈接在這里

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

暫停，使用.pause()和interval=false來防止“mouseleave”事件回收。 bootstrap本身就是這樣用的，可以在這里看到

解決方案9
 1  2015-07-16 21:14:50

實際上，如下更改bootstrap-carousel.js中的默認值對我有幫助。 

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

解決方案10
 0  2017-08-18 10:37:04

我也有一些問題，從自動播放Stop bootstrap Carousel 。 我檢查了bootstrap.js文件，我找到了與carousel相關的代碼，然后我刪除了另一個js。 在新的js文件中，我從所有代碼復制，然后我將Carousel變量更改為Carousel_n （因為它可以將其更改為您想要的任何內容）。 在最后一行代碼中，最重要的是： 

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

我將carousel carousel_n更改為carousel_n 。

對於html我只改變了： 

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

至 

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

當然它確實奏效了。

解決方案11
 -1  2016-10-25 13:12:11

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 發生某些事件時，引導傳送帶停止循環 Bootstrap Carousel：指示器不騎車 Bootstrap傳送帶不會滑動 Bootstrap Carousel無法正常工作 Bootstrap Carousel圖片無法正確對齊 引導輪播似乎不起作用 引導輪播不會在哈巴狗中滑動 貓頭鷹傳送帶無法與引導程序一起正常使用 Bootstrap Carousel 圖像不適用 Twitter Bootstrap Carousel Slide不起作用
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM