How to stop Bootstrap carousel from auto sliding

 

To set or to stop auto play in Bootstrap carousel you can use data attributes 

Detailed documentation and more examples of Bootstrap grid you can find in our Bootstrap Carousel Docs.

Note: Auto play for the carousel is turned on from default.

To turn off the auto play set data-interval="false" to the carousel element.

<div id="carouselExampleIndicators" class="carousel slide" data-interval="false" data-ride="carousel" data-pause="hover">

  <ol class="carousel-indicators">

    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>

    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>

    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>

  </ol>

  <div class="carousel-inner">

    <div class="carousel-item active">

      <img class="d-block w-100" src="..." alt="First slide">

    </div>

    <div class="carousel-item">

      <img class="d-block w-100" src="..." alt="Second slide">

    </div>

    <div class="carousel-item">

      <img class="d-block w-100" src="..." alt="Third slide">

    </div>

  </div>

  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>