3

Bootstrap カルーセルでは、 data 属性を使用してマウスオーバー時の一時停止を無効にしたいのですが、可能ですか。データ間隔も設定しようとしていますが、どちらも機能しません。ただし、JavaScriptを使用して動作しますが、データ属性を使用して使用したいです。

オプションは、データ属性または JavaScriptz を介して渡すことができます。データ属性の場合、data-interval="" のようにオプション名を data- に追加します。

  • ブートストラップ公式サイトより。

前もって感謝します。JavaScript -

<script type="text/javascript">
$(function(){
     $("#myCarousel").carousel();
});
</script>

HTML -

<div class="container">
    <div id="myCarousel" class="carousel slide" data-interval="2000" data-pause="false">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item"><img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt=""></div>
    <div class="item"><img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt=""></div>
    <div class="item"><img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt=""></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>
</div>
4

2 に答える 2

0

これは少し遅いですが、他の人にも役立つかもしれないと思います. 問題は、データ属性と JavaScript を混在させようとしているためだと思います。一時停止オプションをデータ属性として追加する代わりに、carousel関数を呼び出すときに追加します。

$(function(){
     $("#myCarousel").carousel({
          pause: false
     });
});

間隔データ属性も使用する必要がある場合があります。

于 2014-12-09T13:49:00.507 に答える