3

Bootstrap の既製のカルーセルを使用して、ユーザーがインジケーターまたはコントロール (次/前のボタン) をクリックしたときに自動サイクル機能を無効にしたいと考えています。したがって、ユーザーが「次へ」ボタンをクリックすると、カルーセルは手動になります。jQueryには強くありませんが、これが私の試みでした。

$('#myCarousel').click(function() {
    $(this).stop();
});
4

2 に答える 2

1

intervalカルーセルの.data()オブジェクトを介してオプションにアクセスし、false..

$('#myCarousel').click(function() {
  $(this).data('carousel').options.interval=false;
});

デモ: http://www.bootply.com/65091

于 2013-06-20T18:05:44.427 に答える
0

Bootstrap 3 では、このようなことをしています。注: ページの大部分がカルーセルで覆われているため、ホバー時に一時停止しないように指示しています (マウスが既にホバーしている可能性があるため)。

カルーセルが任意の場所 (インジケーターを含む) をクリックしたときに一時停止するには:

$('#myCarousel').click(function () {
        $('#myCarousel').carousel('pause');
});

インジケーターがクリックされたときだけ一時停止するには、次のようになります。他の要素についても同様です。

$(".carousel-indicators").click(function () {
        $('#myCarousel').carousel('pause');
});

質問の範囲内ではありませんが、マウスホバーで一時停止するのを防ぐ方法は次のとおりです。

$('#myCarousel').carousel({
        pause: "false"
});
于 2016-09-29T16:59:50.847 に答える