w4k7sw
Last Updated: February 25, 2016
·
25.82K
· lukeman

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.

7 Responses
Add your response

3783

How does this translate into non .less CSS?

over 1 year ago ·
3949

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:

www.panyl.com

over 1 year ago ·
3999

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;

}

over 1 year ago ·
5770

I added this to keep the navigation buttons from flashing during the crossfade:

.carousel-control {
z-index:3;
}

over 1 year ago ·
8970

Beautiful! Thanks so much. It works great.

over 1 year ago ·
10226

Thanks Luke! Works perfectly in Safari, but not Chrome or FF for me. Is it working for others?

over 1 year ago ·
16156

estaples, not working in FF or IE, working fine in Chrome

over 1 year ago ·