实现Bootstrap Carousel Fade Transition 淡入淡出效果

html代码：

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#carousel" data-slide="next">›</a>
</div>

Less代码：

.carousel-fade {
    .carousel-inner {
        .item {
            transition-property: opacity;
        }

        .item,
        .active.left,
        .active.right {
            opacity: 0;
        }

        .active,
        .next.left,
        .prev.right {
            opacity: 1;
        }
        .next,
        .prev,
        .active.left,
        .active.right {
            left: 0;
            transform: translate3d(0, 0, 0);
        }
    }
    .carousel-control {
        z-index: 2;
    }
}
html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
    height: 100%;
}
.item:nth-child(1) {
    background: #74C390;
}
.item:nth-child(2) {
    background: #51BCE8;
}
.item:nth-child(3) {
    background: #E46653;
}

js调用代码

$('.carousel').carousel();

　　

实际是重写了carousel的样式，实现淡入淡出效果

演示地址:http://codepen.io/Rowno/pen/Afykb