CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
khatzie
khatzie

Reputation: 2569

Bootstrap Carousel : Remove auto slide

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?

Upvotes: 152

Views: 325158

Answers (10)

PAISIBLE
PAISIBLE

Reputation: 1

for bootstrap 5 just write this data-bs-ride="carousel"

Upvotes: 0

Gil
Gil

Reputation: 1

Omitting the data-bs-ride may work.

Upvotes: -1

Hiten Sharma
Hiten Sharma

Reputation: 117

In Bootstrap v5 use: data-bs-interval="false"

<div id="carouselExampleCaptions" class="carousel" data-bs-ride="carousel" data-bs-interval="false">

Upvotes: 10

Iliya Reyzis
Iliya Reyzis

Reputation: 3687

You can do this 2 ways, via js or html (easist)

  1. Via js
$('.carousel').carousel({
  interval: false,
});

That will make the auto sliding stop because there no Milliseconds added and will never slider next.

  1. Via Html By adding data-interval="false" and removing data-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

Upvotes: 301

Nitin Anvekar
Nitin Anvekar

Reputation: 41

$(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

Upvotes: 4

Arun
Arun

Reputation: 430

Change/Add to data-interval="false" on carousel div

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="false" id="myCarousel">

Upvotes: 40

Nikit Barochiya
Nikit Barochiya

Reputation: 1091

Please try the following:

<script>
    $(document).ready(function() {      
        $('.carousel').carousel('pause');
    });
</script>

Upvotes: 9

user6560814
user6560814

Reputation:

data-interval="false"

Add this to the corresponding div ...

Upvotes: 4

Nikunj Dhimar
Nikunj Dhimar

Reputation: 2386

You just need to add one more attribute to your DIV tag which is

data-interval="false"

no need to touch JS!

Upvotes: 63

Diego Agull&#243;
Diego Agull&#243;

Reputation: 9586

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.

Upvotes: 116

Related Questions