To implement a fade transition for your bootstrap carousel, add and use the following class to the carousel main holder.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.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:
|
1 2 3 |
<div id="my-carousel" class="carousel slide c-fade"> |