【发布时间】：2016-06-02 19:04:40
【问题描述】：
我在引导轮播上苦苦挣扎了几天，它应该像默认的一样向左/向右滑动，但增加了褪色（新项目在进入时会慢慢变得不透明，而前一个项目在移出时会慢慢失去不透明度），我尝试了很多变体，但其中一些在 Firefox 中不起作用，其他在 Opera 中一直失败等。
这里是 HTML：
<section>
<div class="container">
<h2>Some title</h2>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<p>Some text</p>
<div class="ingo col-sm-8 col-sm-offset-2">
<div id="pubCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="foto" src="{{'assets/img/some-image.jpg'|theme }}"/>
<h3 class="name longn">Carousel text</h3>
</div>
<div class="item">
<img class="foto" src="{{'assets/img/some-image.jpg'|theme }}"/>
<h3 class="name">Carousel text</h3>
</div>
</div>
<div class="pub-counter">
<p class="counter-line"></p>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#pubCarousel" role="button" data-slide="prev">
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#pubCarousel" role="button" data-slide="next">
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
这是我的轮播设置，它不起作用（我知道它现在很糟糕，我尝试了 10 种解决方案，但它仍然不起作用），其余的轮播是默认设置：
.ingo .carousel-inner>.item {
-webkit-transition: -webkit-transform 1s ease-in-out, opacity 2s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out, opacity .5s ease-in-out;
-o-transition: -o-transform 1s ease-in-out, opacity 2s ease-in-out;
transition: transform 1s ease-in-out, opacity 2s ease-in-out;
}
.ingo .carousel-inner>.item.active,.ingo .carousel-inner>.item.active {
-webkit-transition: -webkit-transform 1s ease-in-out, opacity .5s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out, opacity .5s ease-in-out;
-o-transition: -o-transform 1s ease-in-out, opacity .5s ease-in-out;
transition: transform 1s ease-in-out, opacity 2s ease-in-out;
}
.ingo .carousel .item {
opacity:0;
}
.ingo .carousel .carousel-inner .active {
opacity: 1;
}
.ingo .carousel .carousel-inner .next,
.ingo .carousel .carousel-inner .prev
.ingo .carousel .carousel-inner .active.left,
.ingo .carousel .carousel-inner .active.right {
left: 0;
opacity: 0;
}
.ingo .carousel .carousel-inner .next.left,
.ingo .carousel .carousel-inner .prev.right {
opacity: 1;
}
我没有使用任何 JS 修改。我希望这个答案不会重复一些已经发布的问题，我只是找不到解决方案。
感谢大家的帮助，非常感谢。
【问题讨论】：
标签： javascript html css twitter-bootstrap carousel