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;
}

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

 

Comments

  1. Thank's a lot it is so simple and very effective.

    ReplyDelete
  2. Works perfect, thank you so much!!!

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

    Thank you!

    ReplyDelete
  4. It was Awesome and creative!
    Thanks

    ReplyDelete
  5. It works correctly

    ReplyDelete
  6. thanks,,
    It works................

    ReplyDelete

Post a Comment

Popular posts from this blog

PIP - upgrade all packages from requirements.txt (interactively)

Improve font rendering for IntelliJ IDEA / Pycharm in Ubuntu