Bootstrap轮播切换效果修改为渐变

Bootstrap 轮播Carousel 效果，默认图片切换的效果是左右滑动的，并且Bootstrap并没有内置切换效果的js方法，需要使用css样式来改变切换效果为渐变。

Bootstrap 轮播 Carousel 默认代码为：

<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">
      <li class="item active" style="background:url(images/1.jpg) center 0 no-repeat;"></li>
      <li class="item" style="background:url(images/2.jpg) center 0 no-repeat;"></li>
    </div>
</div>

需要将默认的左右滑动的切换效果改变为渐变，则需要添加一个css样式，这里添加为carousel-fade。修改后的代码为：

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

然后添加对应的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;
}

Bootstrap 轮播 Carousel 切换效果就变为渐变了。