Bootstrap Carousel : Remove auto slide
JavascriptJqueryTwitter BootstrapJavascript Problem Overview
I'm using Bootstrap Carousel. All I want is that the slider will only slide when a navigation or a pagination is clicked. I've tried removing
$('.carousel').carousel({
interval: 6000
});
It works fine but my problem is once I've already clicked a navigation or pagination, it is now auto sliding. Is it possible to remove the auto sliding function? If so, how?
Javascript Solutions
Solution 1 - Javascript
You can do this 2 ways, via js or html (easist)
- Via js
$('.carousel').carousel({
interval: false,
});
That will make the auto sliding stop because there no Milliseconds added and will never slider next.
- Via Html By adding
data-interval="false"
and removingdata-ride="carousel"
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
becomes:
<div id="carouselExampleCaptions" class="carousel slide" data-interval="false">
updated based on @webMan's comment
Solution 2 - Javascript
From the official docs:
> interval The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
You can either pass this value with javascript or using a data-interval="false"
attribute.
Solution 3 - Javascript
You just need to add one more attribute to your DIV tag which is
data-interval="false"
no need to touch JS!
Solution 4 - Javascript
Change/Add to data-interval="false" on carousel div
<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="false" id="myCarousel">
Solution 5 - Javascript
Please try the following:
<script>
$(document).ready(function() {
$('.carousel').carousel('pause');
});
</script>
Solution 6 - Javascript
In Bootstrap v5 use: data-bs-interval="false"
<div id="carouselExampleCaptions" class="carousel" data-bs-ride="carousel" data-bs-interval="false">
Solution 7 - Javascript
data-interval="false"
Add this to the corresponding div ...
Solution 8 - Javascript
$(document).ready(function() {
$('#media').carousel({
pause: true,
interval: 40000,
});
});
By using the above script, you will be able to move the images automaticaly
$(document).ready(function() {
$('#media').carousel({
pause: true,
interval: false,
});
});
By using the above script, auto-rotation
will be blocked because interval
is false