如何淡化过渡轮播幻灯片？答案

【问题标题】：How to fade transition carousel slides?如何淡化过渡轮播幻灯片？
【发布时间】：2020-08-05 04:36:59
【问题描述】：

我正在尝试循环播放轮播（引导程序 3.3.4）中的三个图像，这些图像具有淡入淡出过渡而不是幻灯片过渡。第一个图像正确显示，我可以使用单击控件手动循环显示图像，但它不会自动循环。有什么想法吗？

HTML

<div id="myCarousel" class="carousel slide carousel-fade" data-interval="3000">
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
            <li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
            <li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
          </ol>
          <div class="carousel-inner">
            <div class="active item" style="">
              <img src="..\Images\Hopewell_Rainbow.jpg" alt="" class="" width="3000px"
              height="800px">
            </div>
            <div class="item">
              <img src="..\Images\WorshipfulWork.jpg" alt="" class="" width="3000px"
              height="800px">
            </div>
            <div class="item" style="">
              <img src="..\Images\Preschool2.jpg" alt="" class="" width="3000px" height="800px">
            </div>
          </div>
        </div>

CSS

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    height: auto;
    width: 100%;
    line-height: 1;
}

.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
}    
.carousel-fade .carousel-inner .active {
opacity: 1;
}    
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}    
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}    
.carousel-fade .carousel-control {
z-index: 2;
}

@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

【问题讨论】：

我会假设您缺少</div>

标签： css

【解决方案1】：

要激活“自动播放”，您需要添加data-ride="carousel"。

<div id="myCarousel" class="carousel slide carousel-fade" data-interval="3000" data-ride="carousel">

【讨论】：

这很容易。谢谢。不知道为什么我的网站编辑器没有包含它，但我确定这是我的错。 :)