Bootstrap carousel – fade effect vs slide

To implement a fade transition for your bootstrap carousel, add and use the following class to the carousel main holder.


.carousel.c-fade .item {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.carousel.c-fade .active.left,
.carousel.c-fade .active.right {
  left: 0;
  z-index: 2;
  opacity: 0;
  filter: alpha(opacity=0);
}
.carousel.c-fade .next,
.carousel.c-fade .prev {
  left: 0;
  z-index: 1;
}
.carousel.c-fade .carousel-control {
  z-index: 3;
}

.carousel.c-fade .item {

-webkit-transition: opacity 1s ease-in-out;

-moz-transition: opacity 1s ease-in-out;

-ms-transition: opacity 1s ease-in-out;

-o-transition: opacity 1s ease-in-out;

transition: opacity 1s ease-in-out;

}

.carousel.c-fade .active.left,

.carousel.c-fade .active.right {

left: 0;

z-index: 2;

opacity: 0;

filter: alpha(opacity=0);

}

.carousel.c-fade .next,

.carousel.c-fade .prev {

left: 0;

z-index: 1;

}

.carousel.c-fade .carousel-control {

z-index: 3;

}

Example:


<div id="my-carousel" class="carousel slide c-fade">

http://altafphp.blogspot.in/ Altaf Hussain

Great. It works perfect.
theo

Thank’s a lot it is so simple and very effective.
Bruno

Works perfect, thank you so much!!!
http://www.properreads.com Nick

Excellent work!
http://www.frankjuval.com Frank

This is great! How do I get it to fade to black between slides?

Thank you!
Farzad

It was Awesome and creative!
Thanks
Abdul Nasir

It works correctly
Asep Setyawan

thanks,,
It works…………….