我在我正在开发的网站 (http://furnitureroadshow.com/) 上有一个非常基本的 Twitter Bootstrap Carousel 插件实现。我只是想知道是否有人扩展了 Carousel 插件，使其在幻灯片过渡时淡入淡出？
我在 github.com (https://github.com/twitter/bootstrap/issues/2050) 上发现了这个问题 #2050，这似乎表明目前不可能。只是想看看它是否可以或已经完成。
【问题讨论】：
标签： jquery twitter-bootstrap carousel
是的。 Bootstrap 使用 CSS 过渡，因此无需任何 Javascript 即可轻松完成。
CSS：
.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;}
然而，我注意到过渡结束事件过早触发，默认间隔为 5 秒，淡入淡出过渡为 3 秒。将轮播间隔设置为 8 秒会产生很好的效果。
非常流畅。
【讨论】：
.carousel .active.right 以说明在画廊中以其他方式移动，但感谢您提供了正确的方向。
.item 一个背景颜色，或者溶解不是很流畅。
是的。 虽然我使用下面的代码。
.carousel.fade
{
opacity: 1;
.item
{
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
left: 0 !important;
opacity: 0;
top:0;
position:absolute;
width: 100%;
display:block !important;
z-index:1;
&:first-child{
top:auto;
position:relative;
}
&.active
{
opacity: 1;
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
z-index:2;
}
}
}
然后将轮播上的类从“carousel slide”更改为“carousel fade”。这适用于 safari、chrome、firefox 和 IE 10。它会在 IE 9 中正确降级，但是不会出现漂亮的面部效果。
编辑：由于这个答案变得如此受欢迎，我添加了以下内容，将其重写为纯 CSS，而不是上面的 LESS：
.carousel.fade {
opacity: 1;
}
.carousel.fade .item {
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
left: 0 !important;
opacity: 0;
top:0;
position:absolute;
width: 100%;
display:block !important;
z-index:1;
}
.carousel.fade .item:first-child {
top:auto;
position:relative;
}
.carousel.fade .item.active {
opacity: 1;
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
z-index:2;
}
【讨论】：
display: none，所以无论当前显示的是哪个.item，鼠标总是悬停在最后一个.item上。 CSS (>_
title 属性的功能，就像我刚才那样。我尝试将.item 设置为display: none 并将.item.active 设置为display: block，但这阻止了除了第一张幻灯片之外的所有幻灯片。
是的。 Bootstrap 使用 CSS 转换，因此无需任何 Javascript 即可轻松完成。 只需使用 CSS3。请看一下
carousel.carousel-fade
在以下示例的 CSS 中：
【讨论】：
在使用 Bootstrap 3 时遇到了这个问题。
我的解决方案是将 carousel-fade 类添加到轮播主 DIV 中，并将以下 CSS 插入其中，之后包含 Bootstrap CSS：
.carousel-fade .item {
opacity: 0;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
left: 0 !important;
}
.carousel-fade .active {
opacity: 1 !important;
}
.carousel-fade .left {
opacity: 0 !important;
-webkit-transition: opacity 0.5s ease-in-out !important;
-moz-transition: opacity 0.5s ease-in-out !important;
-ms-transition: opacity 0.5s ease-in-out !important;
-o-transition: opacity 0.5s ease-in-out !important;
transition: opacity 0.5s ease-in-out !important;
}
.carousel-fade .carousel-control {
opacity: 1 !important;
}
Bootstrap 应用的样式转换意味着您必须快速进行中间步幅转换（活动左侧，下一个左侧），否则项目最终会消失（因此需要 1/2 秒的转换时间）。
我没有尝试过调整 .item 和 .left 过渡时间，但它们可能需要按比例调整以保持效果看起来不错。
【讨论】：
如果您使用的是 Bootstrap 3.3.x，请使用此代码 （您需要在轮播中添加类名 carousel-fade）。
.carousel-fade .carousel-inner .item {
-webkit-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}
【讨论】：
注意：如果您使用的是 Bootstrap + AngularJS + UI Bootstrap，则永远不会添加 .left .right 和 .next 类。使用以下链接中的示例和 Robert McKee 答案中的 CSS 有效。我想发表评论，因为花了 3 天时间才找到完整的解决方案。希望这对其他人有帮助！
https://angular-ui.github.io/bootstrap/#/carousel
来自上述链接的 UI Bootstrap Demo 的代码片段。
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
var slides = $scope.slides = [];
$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
image: 'http://placekitten.com/' + newWidth + '/300',
text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
});
};
for (var i=0; i<4; i++) {
$scope.addSlide();
}
});
来自 UI Bootstrap 的 HTML，注意我在示例中添加了 .fade 类。
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<carousel class="fade" interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
</div>
来自 Robert McKee 上述答案的 CSS
.carousel.fade {
opacity: 1;
}
.carousel.fade .item {
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
left: 0 !important;
opacity: 0;
top:0;
position:absolute;
width: 100%;
display:block !important;
z-index:1;
}
.carousel.fade .item:first-child {
top:auto;
position:relative;
}
.carousel.fade .item.active {
opacity: 1;
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
z-index:2;
}
/*
Added z-index to raise the left right controls to the top
*/
.carousel-control {
z-index:3;
}
【讨论】：