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">