Twitter Bootstrap Carousel插件能否在幻灯片过渡时淡入和淡出 [英] Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition

问题描述

在我正在工作的网站上，我有一个Twitter Bootstrap Carousel插件的非常基本的实现( http://furnitureroadshow .com/).我只是想知道是否有人扩展了Carousel插件，以便它在幻灯片过渡时渐入渐出?

I have a very basic implementation of the Twitter Bootstrap Carousel plugin on a site that I am working on (http://furnitureroadshow.com/). I was just wondering if anyone had extended the Carousel plugin so that it fades in and fades out on slide transition?

我在github.com( https://github.com/twitter/bootstrap/issues/2050 )，似乎暗示这是不可能的.只是想看看它是否可能或已经完成.

I found this issue #2050 on github.com (https://github.com/twitter/bootstrap/issues/2050) that seems to suggest that at this point, it isn't possible. Just wanted to see if it could be or has been done.

推荐答案

是. Bootstrap使用CSS过渡，因此无需任何Java脚本即可轻松完成.

Yes. Bootstrap uses CSS transitions so it can be done easily without any 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会产生很好的效果.

I noticed however that the transition end event was firing prematurely with the default interval of 5s and a fade transition of 3s. Bumping the carousel interval to 8s provides a nice effect.

非常顺利.

这篇关于Twitter Bootstrap Carousel插件能否在幻灯片过渡时淡入和淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！