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.

Answer 2

Yes. Although I use the following code.

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

Then change the class on the carousel from "carousel slide" to "carousel fade". This works in safari, chrome, firefox, and IE 10. It will correctly downgrade in IE 9, however, the nice face effect doesn't happen.

Edit: Since this answer has gotten so popular I've added the following which rewritten as pure CSS instead of the above which was LESS:

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