修改 Bootstrap 幻灯片的轮播效果切换方式

Question

Bootstrap 的轮播（Carousel）插件制作出的幻灯片，默认的图片切换是左右滑动式的，效果虽然好看也能接受，但是项目需求需要使用淡入淡出的方式切换。

使用 Bootstrap 的轮播（Carousel）插件制作幻灯片，html 代码如下：

<div id="myCarousel" class="carousel slide">
   <!-- 轮播（Carousel）指标 -->
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
   </ol>   
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="http://www.wpmomo.com/wp-content/uploads/2015/04/slider13.png" alt="First slide">
      </div>
      <div class="item">
         <img src="http://www.wpmomo.com/wp-content/uploads/2015/04/slider2.png" alt="Second slide">
      </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
   <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

如此制作出的幻灯片，默认的图片切换是左右滑动式的，如何修改它的切换效果呢？将上述代码的：

<div id="myCarousel" class="carousel slide">

修改一下，加入一个 carousel-fade 类：

<div id="myCarousel" class="carousel-fade carousel slide">

然后添加 carousel-fade 的 css 样式：

.carousel-fade .carousel-inner .item{  
    opacity:0;  
    -webkit-transition-property:opacity ;  
    -moz-transition-property:opacity ;  
    -ms-transition-property:opacity ;  
    -o-transition-property:opacity ;  
    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;
}
.carousel-fade .carousel-inner .next.left,.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

这样，幻灯片的切换效果变成淡入淡出式了。

Answer 1

感觉切换的不够自然，不是连续淡入淡出的。