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>
data-interval="false"
を追加する
<div id="carousel-example-generic" class="carousel slide" data-interval="false" data-ride="carousel" data-pause="hover" >
ドキュメント から
オプション-間隔-..falseの場合、カルーセルは自動的に循環しません。
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 }); });
ありがとう:)
自動再生を停止するには、htmlcodeから属性data-ride =” carousel”を削除するだけです。
<div id="carousel-example" class="carousel slide" data-ride="carousel">....</div>
自動再生を停止する別の方法は、jsファイルのコードの下に追加するだけです
$(window).load(function() {
$('.carousel').carousel('pause');
});
このコードをカスタムJavaScriptファイルに貼り付けます。
$( '。carousel')。carousel({間隔:false});