web-dev-qa-db-ja.com

bootstrapカルーセルに再生/一時停止ボタンを追加する

bootstrapカルーセルに関するほとんどすべてのスレッドを読みましたが、質問への回答が見つかりません。カルーセルに2つのコントロールボタン（再生/一時停止）を追加しましたが、それぞれボタンは、デフォルト/最初のスライドから機能を起動します。現在のスライドを一時停止し、クリックイベントが発生するたびに現在のスライドから再生できるようにしたいと考えています。

これが私のコードです：

<script src="/_catalogs/masterpage/UHN/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $('.carousel').carousel({ interval:6000 });  

        $('#playButton').click(function () {
            $('#homeCarousel').carousel('cycle');
        });
        $('#pauseButton').click(function () {
            $('#homeCarousel').carousel('pause');
        });
    });

</script>

そして、2つのコントロール：

<!--Carousel controls -->
<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>
twitter-bootstrapcarousel
12
Mojgan

これはうまくいくはずです。 bootstrapカルーセルの一部の要素が要素の上に表示され、クリックを防ぐことができるため、クリックイベントが期待どおりに発生することを確認します。

[〜＃〜] html [〜＃〜]に次のコントロールを追加すると、

<div id="carouselButtons">
    <button id="playButton" type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-play"></span>
     </button>
    <button id="pauseButton" type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-pause"></span>
    </button>
</div>

次に、次のJavaScriptが任意のフレームの開始と停止を制御します。

$('#playButton').click(function () {
    $('#homeCarousel').carousel('cycle');
});
$('#pauseButton').click(function () {
    $('#homeCarousel').carousel('pause');
});

最初のポイントに関連して、カルーセル内に適切に表示されるようにするには、ボタングループを次のようにスタイル設定できます[〜＃〜] css [〜＃〜]：

#carouselButtons {
    margin-left: 100px;
    position: absolute;
    bottom: 0px;
}

jsFiddleのデモ

この機能を最大限に活用するには、カルーセルをホバーした場合でも、カルーセルを動かし続ける必要があります（それ以外の場合は、再生を選択した後、マウスを動かすまでサイクリング動作は再開しません）。

carousel docs によると：

オプション-一時停止
Default-"hover"-mouseenterでカルーセルの循環を一時停止し、mouseleaveでカルーセルの循環を再開します。

代わりに、次のようにカルーセルを初期化するときに、これをオフにしてください。

$('#homeCarousel').carousel({
    interval:2000,
    pause: "false"
});
15
KyleMit

これが私のアプローチでした。 .pauseクラスと.playクラスを適切にスタイル設定できますが、私はデモ目的でプレーンテキストを使用しています。

$('.carousel-control.pause').click(function() {
        var controls = $(this);
        if (controls.hasClass('pause')) {
            controls.text('Resume').removeClass('pause').toggleClass('play');
            $('#myCarousel').carousel('pause');
        } else {
            controls.text('Pause').removeClass('play').toggleClass('pause');
            $('#myCarousel').carousel('cycle');
        }
    });

ここにあなたの起爆装置があります

<a class="carousel-control pause" href="javascript:void(0);">Pause</a>
1
Evan

再生/一時停止ボタンをオフにしたい人のために。 jsFiddleの例

Javascript：

 $("button").click(function() {
  if ($(this).attr("id") === "pauseButton") {
    $('#homeCarousel').carousel('pause');
    $(this).attr("id", "playButton");
    $("span", this).toggleClass("glyphicon-play glyphicon-pause");
  } else {
    $('#homeCarousel').carousel('cycle');
    $(this).attr("id", "pauseButton");
    $("span", this).toggleClass("glyphicon-pause glyphicon-play");
  }
});

HTML：

<div id="carouselButtons">
    <button id="pauseButton" type="button" class="btn btn-default btn-xs">
      <span class="glyphicon glyphicon-pause"></span>
    </button>
  </div>
0
Maria