Menu
I have built a bootstrap video carousel. It is working just fine but, the only problem I have is the carousel keeps sliding to the next slide after 5 seconds. How do I make it stop autosliding and only slide when the user clicks on the left or right arrows? I have pasted the code below.
<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> 
704
The HTML code is very simple. Now, the first way to stop the autoplay is by just removing the attribute data-ride=”carousel” from the code above. $( '. carousel' ).
click(function(){ alert("Clicked."); $('#myCarousel'). carousel({ pause: true, interval: false }); });
By adding data-interval="false"
<div id="carousel-example-generic" class="carousel slide" data-interval="false" data-ride="carousel" data-pause="hover" > From the documentation
Option - Interval - ..If false, carousel will not automatically cycle.
In Bootstrap 5 it is data-bs-interval="false"
<div id="carousel-example-generic" class="carousel slide" data-bs-interval="false" data-ride="carousel" data-pause="hover"> Documentation
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
