twitter bootstrap's carousel fade transition

Question

this is a follow-up question regarding an answer by @StrangeElement to this older question: Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition

i tried @StrangeElement's mod to the bootstrap.css and i almost have it working. the problem is that when the active image fade's out, it fades to white, then the next image will pop in with no fade in animation. what might i be missing here?

here's the example i'm working with:

http://planetofsoundonline.com/beta/index.php

any kind of pointers would be hugely appreciated. thanks!

Answer 1

Take a look at this fiddle. Unfortunately it doesn't work on any of the currently available versions of Internet Explorer.

Your carousel div only needs an extra class carousel-fade added, for it to work.

[source]

This transition shows the next image and then fades the new image out on top of it. If you want a direct fade out fade in animation, add these lines to the css.

.carousel.carousel-fade .item {
  opacity:0;
}

.carousel.carousel-fade .active.item {
    opacity:1;
}