web-dev-qa-db-ja.com

Bootstrapカルーセルの自動スライドを停止する方法は？

bootstrapビデオカルーセルを作成しました。問題なく機能していますが、5秒後にカルーセルが次のスライドにスライドし続けるという問題があります。自動スライドを停止して、ユーザーが左または右の矢印をクリックしたときにのみスライドする？下記のコードを貼り付けました。

    <div class="container">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-pause=hover>
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <div class="embed-responsive embed-responsive-16by9">
                        <video class="embed-responsive-item" autoplay muted id="homevid">
                            <source src="C:\Development Software\Sample Website\videos\Michael Vick 88 yard touchdown pass to DeSean Jackson.mp4" />
                        </video>
                    </div>
                <div class="carousel-caption">

            </div>
        </div>
            <div class="item">
                <div class="embed-responsive embed-responsive-16by9">
                    <video class="embed-responsive-item" autoplay muted id="homevid">
                        <source src="C:\Development Software\Sample Website\videos\Vick to Jeremy Maclin for 50 Yard TD.mp4" />
                    </video>
                </div>

            </div>
            <div class="item">
                <div class="embed-responsive embed-responsive-16by9">
                    <video class="embed-responsive-item" autoplay muted id="homevid">
                        <source src="C:\Development Software\Sample Website\videos\Michael Vick Scramble Plays vs Rams 2011.mp4" />
                    </video>
                </div>
          </div>
    </div>
htmltwitter-bootstrapcarousel
17
user3123222

data-interval="false"を追加する

<div id="carousel-example-generic" class="carousel slide" data-interval="false" data-ride="carousel" data-pause="hover" >

ドキュメント から

オプション-間隔-..falseの場合、カルーセルは自動的に循環しません。

51
Brian Dillingham

2つの方法があります。

1。

HTMLコードでは、data-interval = "false"のみを使用する必要があります

<div id="your-carousel-id" class="carousel slide" data-interval="false">
    .....
</div>

2。

Jqueryの助けを借りてやりたい場合は、追加する必要があります。

//document ready
$(document).ready(function(){
    //Event for pushed the video
    $('#your-carousel-id').carousel({
        pause: true,
        interval: false
    });
});

ありがとう:)

12
Vinod Kumar

自動再生を停止するには、htmlcodeから属性data-ride =” carousel”を削除するだけです。

<div id="carousel-example" class="carousel slide" data-ride="carousel">....</div>

自動再生を停止する別の方法は、jsファイルのコードの下に追加するだけです

$(window).load(function() {
    $('.carousel').carousel('pause'); 
});
3
Abhay Singh

このコードをカスタムJavaScriptファイルに貼り付けます。

$（ '。carousel'）。carousel（{間隔：false}）;

1
Tariqul_Islam