Twitter Bootstrap Carousel插件可以在幻灯片切换时淡入淡出吗
Twitter Bootstrap Carousel插件可以在幻灯片切换时淡入淡出吗
提问于 2012-03-02 09:56:55
在我工作的一个网站(http://furnitureroadshow.com/)上，我有一个非常基本的Twitter Bootstrap Carousel插件的实现。我只是想知道是否有人扩展了Carousel插件，让它在幻灯片转场中淡入淡出？
我在github.com (https://github.com/twitter/bootstrap/issues/2050)上发现了这个问题#2050，它似乎表明在这一点上，这是不可能的。只是想看看能不能做到或者已经做到了。
回答 3
Stack Overflow用户
发布于 2012-04-05 23:10:31
是。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;}然而，我注意到转换结束事件过早地触发，默认间隔为5s，淡入淡出转换为3s。将轮播间隔增加到8s可以提供很好的效果。
非常流畅。
Stack Overflow用户
发布于 2013-03-06 13:24:54
是。尽管我使用了下面的代码。
.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上的类从"carousel slide“更改为"carousel fade”。这在safari，chrome，firefox和IE 10中都有效。在IE 9中它会正确降级，但不会出现漂亮的面部效果。
编辑:由于这个答案变得如此流行，我添加了以下内容，它们被重写为纯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;
}Stack Overflow用户
发布于 2015-08-30 06:13:40
如果您使用的是Bootstrap 3.3.x，则使用以下代码(您需要将类名称carousel-fade添加到您的carousel中)。
.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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9526970
复制相关文章
相似问题
腾讯云开发者
