How to change transition to fade on Boostrap Carousel module? I have a boostrap carrousel view that works fine, but the slide show only has one option, tansition in milliseconds.

How can I change the transition to fade instead of slide? I've looked at the css code but it keeps moving, so hard to know what to change, additionally, it seems to be getting the css from boostrap.min.css ...

Site is at:

www.xuzo.com
carousel on home page
you could do that with 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.