Boostrap Change Animation

How to Change Bootstrap Carousel Slider Animation to Fade Out Effect or Remove the Sliding Effect

The sliding effect is the default animation for Bootstrap Carousel. Below code is how a general Bootstrap Carousel Slider would look like.

<div id="carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://blog.identitydesign.us/img/bg1.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://blog.identitydesign.us/img/bg2.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://blog.identitydesign.us/img/bg3.jpg">
    </div>
  </div>
</div>

Change Sliding Animation to a “Fade” Effect

Add a class name, carousel-face right after slide. You can also add data-interval="3000" to control the speed of the animation. 1000 is 1 second, and 3000 is 3 seconds. You can replace ‘3000’ with your desired slider speed.

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="3000">

Remove the Sliding Effect Completely

You can completely remove the sliding effect on your carousel. Simply remove slide from the class of div.

<div id="carousel" class="carousel" data-ride="carousel">

Leave a Reply

Your email address will not be published. Required fields are marked *