Bootstrap Carousel : Remove auto slide

Question

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

$(\'.carou         


        

Answer 1

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.

2. 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

Answer 2

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

data-interval="false"

no need to touch JS!

Answer 3

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

Answer 4

Please try the following:

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

Answer 5

data-interval="false"

Add this to the corresponding div ...

Answer 6

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

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