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 上发现了这个问题 #2050(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 转换，因此无需任何 Javascript 即可轻松完成.

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;}

然而，我注意到过渡结束事件过早触发，默认间隔为 5 秒，淡入淡出过渡为 3 秒.将轮播间隔设置为 8 秒可提供不错的效果.

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屋！