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

問題:ご覧のとおり、一時停止モードを有効にし、サイクリングを無効にしました。しかし、カルーセルの左または右のコントロールをクリックすると、マウスリーブでカルーセルがデフォルトの間隔 (1 サイクルあたり 5 秒) で循環を開始します。

サイクリングを強制的に無効にするにはどうすればよいですか? ユーザーが手動で画像を循環させたい。

この問題は、こちらのテスト サイトで実際にテストできます。

4

11 に答える 11

41

「一時停止」属性を削除してみてください。画像を自動的に切り替えない場合は必要ありません。私の仮定 (そして検証のためにブートストラップ コードを調べます) は、「mouseleave」イベントが発生すると、サイクリングが再開されるというものです。最初にオフになっていたとしてもです。再開すると、デフォルトの速度が使用されます。

ここに解決策があります:

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

サイクリングを無効にするには、カルーセル コンテナーに data-interval="false" を追加するのが有効な解決策の 1 つです。

<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

私はこの問題の解決策を思いついたところです。上記のどれも私にはうまくいきませんでしたが、それは私にブートストラップコードを見るようにさせました。このバグの理由は、defaultsオブジェクトのbootstrap-carousel.jsファイルにあると思います。

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

カルーセルがスライドすると、最終的にこれらのデフォルト値に戻ります。カルーセルをスライドさせず、ユーザーだけが制御できるようにする場合は、デフォルトのオブジェクトをfalseの間隔に変更できます。お役に立てれば。

  $.fn.carousel.defaults = {
    interval: false
  , pause: 'hover'
  }
于 2012-11-15T03:29:15.123 に答える
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

実際、bootstrap-carousel.js のデフォルトを次のように変更すると役に立ちました。

Carousel.DEFAULTS = {
    interval: false,
    pause: 'hover',
    wrap: false
  }
于 2015-07-16T21:14:50.697 に答える
1

@dgabrielの答えはうまくいくはずだと思います。

ブートストラップ カルーセルの pause() メソッドは、その引数をあなたが思っているようには扱いません。pause(true) は「はい、一時停止します」という意味ではなく、pause(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」イベントを防止してリサイクルします。ブートストラップ自体はこのように使用します。ここで見ることができます

于 2013-12-31T09:42:41.003 に答える
-1
$('your-carousel').carousel({
pause: true,
interval: false
});
于 2016-10-25T13:12:11.267 に答える