Bootstrap 5 Carousel-fade 缓慢过渡答案

【问题标题】：Bootstrap 5 Carousel-fade slow transitionBootstrap 5 Carousel-fade 缓慢过渡
【发布时间】：2021-09-03 08:48:16
【问题描述】：

我正在尝试使用具有淡入淡出效果的 Bootstrap 5 Carousel，但没有任何运气。我需要图像慢慢淡入淡出。我试过这个解决方案：Bootstrap Carousel - how to fade between slides slowly 还有这个：Bootstrap Carousel Fade Transition

这两种解决方案都不适用于 Bootstrap 5，因为它不再使用 jquery。这是我为测试效果而创建的一支笔： [Codepen 示例][1]

对于如何减慢过渡以及在每张图像之间逐渐淡入和淡出的一些建议，我将不胜感激。

  [1]: https://codepen.io/JapperCat/live/KKWEeJa

【问题讨论】：

这能回答你的问题吗？ Change Bootstrap Carousel fade transition ...“这两种解决方案都不适用于 Bootstrap 5，因为它不再使用 jquery”。轮播淡入淡出与 JS/jQuery 无关。这都是 CSS。使用 Bootstrap 5 的重复问题中的 CSS。

标签： carousel bootstrap-5

【解决方案1】：

假设您想将图像之间的淡入和淡出过渡减慢到 5 秒

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

我编辑了你的笔： https://codepen.io/imazen/pen/BaWbbQz

【讨论】：

完美！这正是我想要的。谢谢