Twitter Bootstrap Carousel Crossfade
Use the following LESS snippet in your site styles to override the default slide behavior of Bootstrap's carousel to create a crossfade. I've seen other examples on SO for doing this, but all of them had issues either with updated Bootstrap versions or with components like calling .slider(index) to "slide" to a specific item.
.carousel {
.item {
.transition(.7s ease-in-out opacity);
left: 0 !important;
}
.next.left, .prev.right {
opacity: 1;
z-index: 1;
}
.active.left, .active.right {
opacity: 0;
z-index: 2;
}
}You can see this in action on https://us.pycon.org/2013/ in the sponsor carousel.
Related protips:
Written by Luke Hatcher
Related protips
7 Responses
How does this translate into non .less CSS?
This just worked for me:
carousel .item {
display: none;
position: relative;
-webkit-transition:.7s ease-in-out opacity;
-moz-transition: .7s ease-in-out opacity;
-ms-transition: .7s ease-in-out opacity;
-o-transition: .7s ease-in-out opacity;
transition: .7s ease-in-out opacity;
left: 0 !important;
transition: 0.6s ease-in-out left; */
}
.carousel .next.left,
.carousel .prev.right {
opacity: 1;
z-index: 1;
}
.carousel .active.left {
opacity: 0;
z-index: 2;
}
.carousel .active.right {
opacity: 0;
z-index: 2;
}
you can see the results here:
Thanks to you guys, I now have this (most simply):
.carousel .item {
-webkit-transition: .7s ease-in-out opacity;
-moz-transition: .7s ease-in-out opacity;
-ms-transition: .7s ease-in-out opacity;
-o-transition: .7s ease-in-out opacity;
transition: .7s ease-in-out opacity;
left: 0 !important;
}
.carousel .active.left,
.carousel .active.right {
opacity: 0;
z-index: 2;
}
/--- ...and only if you're using the prev/next buttons ---/
.carousel .next.left,
.carousel .prev.right {
opacity: 1;
z-index: 1;
}
I added this to keep the navigation buttons from flashing during the crossfade:
.carousel-control {
z-index:3;
}
Beautiful! Thanks so much. It works great.
Thanks Luke! Works perfectly in Safari, but not Chrome or FF for me. Is it working for others?
estaples, not working in FF or IE, working fine in Chrome
Have a fresh tip? Share with Coderwall community!
