旋转木马淡化效果

Question

我希望在旋转木马上创建淡入淡出效果，图像会相互淡化。

<div class="carousel slide" id="carousel">
    <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#carousel"></li>
        <li data-slide-to="1" data-target="#carousel"></li>
        <li data-slide-to="2" data-target="#carousel"></li>
    </ol>
    <div class="carousel-inner">
        <div class="active item">
            <section class="main-hero hero-light-text">
                <div class="container">
                </div><img class="main-image" src="/wp-content/themes/custom/images/1.jpg">
            </section>
        </div>
        <div class="item">
                <div class="container">
                </div><img class="main-image" src="/wp-content/themes/custom/images/2.jpg">
        </div>
        <div class="item">
            <section class="main-hero hero-light-text">
                <div class="container">
                </div><img class="main-image" src="/wp-content/themes/custom/images/3.jpg">
            </section>
        </div>
    </div><a class="carousel-control left" data-slide="prev" href="#carousel">‹</a> <a class="carousel-control right" data-slide="next" href="#carousel">›</a>
</div>

我如何操纵css以使图像相互淡化而不是仅仅切换而没有任何影响。

<style>
.carousel-inner {
    width: auto;

    max-height: 600px
}
.carousel .item {
    -webkit-transition: opacity 3s; 
    -moz-transition: opacity 3s; 
    -ms-transition: opacity 3s; 
    -o-transition: opacity 3s; 
    transition: opacity 3s;
}
.carousel .active.left {
    left:0;opacity:0;z-index:2;
}
.carousel .next {
    left:0;opacity:1;z-index:1;
}
</style>