Bootstrap Carousel : Remove auto slide

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


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.


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

data-interval="false"

no need to touch JS!