1

I'm trying to use the Bootstrap 5 Carousel with the fade effect and not having any luck. I need the images to slowly fade-in and fade-out. I've tried this solution: Bootstrap Carousel - how to fade between slides slowly and this one as well: Bootstrap Carousel Fade Transition

Neither solutions work for Bootstrap 5 since it no longer uses jquery. Here is a pen that I created to test the effects: [Codepen example][1]

I would appreciate some advice on how to slow down the transition and gradually fade-in and fade-out between each image.

  [1]: https://codepen.io/JapperCat/live/KKWEeJa
JappperCat
  • 75
  • 1
  • 10
  • 1
    Does this answer your question? [Change Bootstrap Carousel fade transition](https://stackoverflow.com/questions/48665392/change-bootstrap-carousel-fade-transition) ... "Neither solutions work for Bootstrap 5 since it no longer uses jquery". The carousel fade has nothing to do with JS/jQuery. It's all CSS. Use the CSS from the duplication question for Bootstrap 5. – Carol Skelly Jun 18 '21 at 17:18

1 Answers1

2

Let's say you want to slow fade-in and fade-out transitions to 5 seconds between images

  .carousel-item {
    transition: transform 5s ease-in-out;
  }
  .carousel-fade .active.carousel-item-start,
  .carousel-fade .active.carousel-item-end {
    transition: opacity 0s 5s;
  }

I edited your pen on: https://codepen.io/imazen/pen/BaWbbQz

Mazen Alhrazi
  • 336
  • 1
  • 3
  • 10