Change Bootstrap Carousel fade transition

Question

There are several questions asked on Stackoverflow regarding Carousel fade transition but none of them seem to work on a default 4.0.0 implementation:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <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>

Did bootstrap change the way of transitioning carousel-item -s since Alpha.6 version? How would one go about implementing the fade transition instead of slide in 4.0.0 ?

I have tried it on Alpha.6, Beta and official 4.0.0 release. The implementations that I have seen on Stackoverflow do not work on neither beta nor official 4.0.0 release. — astralmaster, Feb 07 '18 at 13:48
My point is that you're not going to get much support for a beta version when the final has been released. — DavidG, Feb 07 '18 at 13:50
It is no longer a question regarding the Beta release. I have seen that implementation and it does not work on 4.0.0 — astralmaster, Feb 07 '18 at 13:54
Why the downvote? Both duplicates that were referenced discuss beta releases. — astralmaster, Feb 07 '18 at 14:03
@astralmaster I reopened because you've edited this specific to 4.0.0 — Carol Skelly, Feb 07 '18 at 14:22

Carol Skelly · Accepted Answer · 2021-06-18T17:16:29.910

Bootstrap 5 Carousel Fade (update 2021)

Bootstrap 5 includes a "fade" effect that can be used by simply adding the carousel-fade class to the Carousel. By default, the transition duration is .6s. To increase the duration, and make the fade between slides slower, override the transition timing on the CSS...

/* change transition duration to control the speed of fade effect */
.carousel-item {
  transition: transform 2.6s ease-in-out;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  transition: opacity 0s 2.6s;
}

Bootstrap 5 Carousel Fade Slower

Bootstrap 4.0 Carousel Fade (original answer)

.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);
}

The fade effect was removed from the carousel during the 4.0 Beta and is also not available in 4.0.0. This pull request indicates that the fade effect will return in 4.1 or 4.2. In the meanwhile, the above CSS will work for 4.0.0

https://codeply.com/go/LhLJlldsLN

How could I get the [WOW Slider](http://wowslider.com/slider-js-utter-blinds-demo.html) GLASS PARALAX effect in a Bootstrap 4 carousel like the one in your example? — Razvan Zamfir, Jun 12 '18 at 08:32
With Bootstrap 5.1 it is possible to set the time by variable. $carousel-transition-duration: 5s; — CalleKhan, Jun 08 '22 at 14:15

ronaldtgi · Answer 2 · 2021-12-02T07:37:39.350

To get the fade-in effect, you can add "carousel-fade" class to carousel's main div as below.

Update: Bootstrap 5

Bootstrap 5 is almost the same with Bootstrap 4 but the data-ride attribute is now data-bs-ride.

Bootstrap 5 example

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
...
</div>

Bootstrap 4 example

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel"> 
....
</div>

score 0 · Answer 3 · answered Apr 10 '18 at 14:14

0

Should be fixed in Bootstrap 4.1.

https://blog.getbootstrap.com/2018/04/09/bootstrap-4-1/

answered Apr 10 '18 at 14:14

Chris Go

615
7
15

score -2 · Answer 4 · edited May 06 '21 at 22:36

-2

In bootstrap 4, you can add "slide-fade" class like this:

<div id="carouselExampleIndicators" class="carousel slide-fade" data-ride="carousel">....</div>

edited May 06 '21 at 22:36

juliomalves

42,130
20
150
146

answered May 05 '21 at 18:05

Zed junior

1

.... – Zed junior May 05 '21 at 18:06
Add that comment to the answer proper. You can edit it :) – WurmD May 06 '21 at 11:37

Change Bootstrap Carousel fade transition

4 Answers4

Linked