WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

How to change the Bootstrap 4 Carousel to a Fade Transition instead of Sliding

Have you ever wanted to change the default slide transition in the Bootstrap 4 Carousel to a fade transition instead of a slide one? Well, you’re in the right place!

To do that, the only change we need to make to the HTML code is adding the class carousel-fade to the main carousel div. In our example it’s the div with the ID element my-carousel. Next, we can just copy and paste the CSS code below and you will be good to go! Simple right?


<div id="my-carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="5000">
    <ol class="carousel-indicators">
        <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#my-carousel" data-slide-to="1"></li>
        <li data-target="#my-carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img decoding="async" class="d-block w-100" src="//placehold.it/1200x400/cc09f0" alt="First slide">
        </div>
        <div class="carousel-item">
            <img decoding="async" class="d-block w-100" src="//placehold.it/1200x400/5609f0" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img decoding="async" class="d-block w-100" src="//placehold.it/1200x400/cc54f0" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="#my-carousel" 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="#my-carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

.carousel-fade .carousel-item {
	opacity: 0;
	transition-duration: .6s;
	transition-property: opacity;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
	opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
	opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
	transform: translateX(0);
	transform: translate3d(0, 0, 0);
}

We hope this has helped you. Happy coding!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital-related. His main expertise is with WordPress and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

It’s good to share

5 thoughts on “How to change the Bootstrap 4 Carousel to a Fade Transition instead of Sliding

Join the discussion

Related Posts

Related - Bootstrap 4 – Mobile Nav Bar Slide from Left / Right

CSS / 23rd June 2021

Bootstrap 4 – Mobile Nav Bar Slide from Left / Right

Read More Related - How to Change Breakpoints with Bootstrap

CSS / 3rd October 2020

How to Change Breakpoints with Bootstrap

Read More