jquery - Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition

Question

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?

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.

Answer 1

Yes. Bootstrap uses CSS transitions so it can be done easily without any Javascript.

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

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.

Very smooth.