1

Twitterのブートストラップとカルーセル機能を使用しています。マークアップを以下に示します。

ページの読み込み時に、1。カルーセルが最初のスライドから始まり、そこで保持されるようなものを実現しようとしています（たとえば、500ミリ秒）。2.次に、スライド2に移動し、永久に停止します。

スライドは2つしかなく、ユーザーは矢印を使用してスライド間を移動できますが、これによってスライドが絶えず循環することはありません。（これは難しい場合はそれほど重要ではありません）。

カルーセルコントロールを次のように変更しようとしましたが、よくわかりません：http ://twitter.github.com/bootstrap/javascript.html#carousel

から：

<script type="text/javascript">
$('.carousel').carousel({
        interval: 3000
})
</script>

に：

<script type="text/javascript">
                  $('.carousel').carousel({
                  interval: false
                  }).carousel(1).delay('500');
</script>

後者のオプションを実行すると、矢印を押すとカルーセルが連続的に回転しますが、通常はまったく回転しません。

カルーセルマークアップを含めました。お役に立てれば。私の小さなエンドウ豆よりも大きな脳を持っている人は、何かアイデアや指針を持っていますか？

<div id="myCarousel" class="carousel slide">
                  <div class="carousel-inner">
                  <div class="item active">
                        <a href="#" class="featurette">
                        <img class="featurette-image pull-right" width="200" height="200" src="en_200x200.png">
                        <h2 class="featurette-heading">Heading 1</h2><p class="lead muted">Strapline 1</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="featurette">
                        <img class="featurette-image pull-right" width="200" height="200" src="cloud.png">
                        <h2 class="featurette-heading">Heading 2</h2>
                        <p class="lead muted">Strapline 2</p>
                        </a>
                    </div>


                  </div>
                  <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                  <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
                  <hr>


                </div><!-- /.carousel -->
4

3 に答える 3

1

100% うまくいくとは限りませんが、試してみる価値はあります。

このイベントは、最初のスライドが「スライド」した後に発生し、カルーセルを「一時停止」する必要があります。

$('#myCarousel').bind('slid', function() {
    $(this).carousel('pause');
});​

ここの情報から一緒に石畳：

http://twitter.github.com/bootstrap/javascript.html#carousel

于 2013-02-07T14:37:50.653 に答える
0

私はこの解決策を得ました:P open boostrap.js goto 行番号 275 は次のようになります

this.options.pause == 'hover' && this.$element
  .on('mouseenter', $.proxy(this.pause, this))
  .on('mouseleave', $.proxy(this.cycle, this))

true に設定すると、カルーサルが一時停止します

this.options.pause ==true
于 2013-11-20T06:55:53.110 に答える