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

jquery twitter-bootstrap carousel
generalopinion picture generalopinion · Mar 2, 2012 · Viewed 105.9k times · Source

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

StrangeElement picture StrangeElement · Apr 5, 2012

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.

Related questions

Bootstrap Carousel image doesn't align properly

Please take a look at the following image, we are using bootstrap carousel to rotate the images. However, when the window width is large, the image doesn't align with the border properly. But the carousel example provided by bootstrap always …

Read More
Preventing twitter bootstrap carousel from auto sliding on page load

So is there anyway to prevent twitter bootstrap carousel from auto sliding on the page load unless the next or previous button is clicked? Thanks

Read More
How to Get total and Current Slide Number of Carousel

Can you please let me know how I can get the total and current number of the carousel slides in bootstrap like the image below? I have an standard Bootstrap carousel and a <div> with the .num class …

Read More