Out of the box, bootstraps Carousel slides from one frame item to the next. This is great for traditional images or slides, but sometimes you want the same functionality, just different presentation. With this snippet, you can turn that carousel into a fade. Fade Carousels are great for things such as showing multiple testimonials.
/*
Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
CSS from: http://codepen.io/transportedman/pen/NPWRGq
and: http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
Inspired from: http://codepen.io/Rowno/pen/Afykb
*/
.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}