twitter bootstrap's carousel fade transition
carousel, css, javascript, twitter-bootstrap
Solution
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;
}
Problem
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!