Bootstrap 3 Carousel fades with a new slide, rather than sliding onto a new slide

Question

I am using Bootstrap 3, unmodified.

Here

<!-- Carousel ================================================== --> <div id="myCarousel" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> </ol> <div class="carousel-inner"> <div class="item active carousel-1"> <div class="container"> <div class="carousel-caption"> <h1>Example headline.</h1> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-large btn-primary" href="#">Sign up today</a></p> </div> </div> </div> <div class="item carousel-2"> <div class="container"> <div class="carousel-caption"> <h1>Another example headline.</h1> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p> </div> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div><!-- /.carousel --> 

default css from bootstrap 3:

 .carousel { position: relative; } .carousel-inner { position: relative; width: 100%; overflow: hidden; } .carousel-inner > .item { position: relative; display: none; -webkit-transition: 0.6s ease-in-out left; transition: 0.6s ease-in-out left; } .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; height: auto; max-width: 100%; line-height: 1; } .carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev { display: block; } .carousel-inner > .active { left: 0; } .carousel-inner > .next, .carousel-inner > .prev { position: absolute; top: 0; width: 100%; } .carousel-inner > .next { left: 100%; } .carousel-inner > .prev { left: -100%; } .carousel-inner > .next.left, .carousel-inner > .prev.right { left: 0; } .carousel-inner > .active.left { left: -100%; } .carousel-inner > .active.right { left: 100%; } .carousel-control { position: absolute; top: 0; bottom: 0; left: 0; width: 15%; font-size: 20px; color: #ffffff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); opacity: 0.5; filter: alpha(opacity=50); } .carousel-control.left { background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001))); background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%)); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); } .carousel-control.right { right: 0; left: auto; background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5))); background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%)); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); } .carousel-control:hover, .carousel-control:focus { color: #ffffff; text-decoration: none; opacity: 0.9; filter: alpha(opacity=90); } .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { position: absolute; top: 50%; left: 50%; z-index: 5; display: inline-block; } .carousel-control .icon-prev, .carousel-control .icon-next { width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; font-family: serif; } .carousel-control .icon-prev:before { content: '\2039'; } .carousel-control .icon-next:before { content: '\203a'; } .carousel-indicators { position: absolute; bottom: 10px; left: 50%; z-index: 15; width: 60%; padding-left: 0; margin-left: -30%; text-align: center; list-style: none; } .carousel-indicators li { display: inline-block; width: 10px; height: 10px; margin: 1px; text-indent: -999px; cursor: pointer; border: 1px solid #ffffff; border-radius: 10px; } .carousel-indicators .active { width: 12px; height: 12px; margin: 0; background-color: #ffffff; } .carousel-caption { position: absolute; right: 15%; bottom: 20px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #ffffff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .carousel-caption .btn { text-shadow: none; } @media screen and (min-width: 768px) { .carousel-control .icon-prev, .carousel-control .icon-next { width: 30px; height: 30px; margin-top: -15px; margin-left: -15px; font-size: 30px; } .carousel-caption { right: 20%; left: 20%; padding-bottom: 30px; } .carousel-indicators { bottom: 20px; } } 

some css that I added:

  .carousel { height: 500px; } .carousel-inner { height: 100%; } .carousel-1 { height: 100%; background: url(../images/carousel1.jpg) no-repeat center center fixed; -webkit-background-size: cover; background-size: cover; } .carousel-2 { height: 100%; background: url(../images/carousel2.jpg) no-repeat center center fixed; -webkit-background-size: cover; background-size: cover; } 

but I can’t understand how I can use this carousel with a fading effect. I tried to change the opacity from 1 to 0, when the active element, but it makes 2 animations, it slides to the left and also changes the opacity.

Can you help me?

Answer 1

Updating from 3.2.x to 3.3.x violated some of the solutions described here and other threads due to the change: "Added transformations to improve carousel performance in modern browsers."

If you are using Bootstrap 3.3.x , there is a solution here:
http://codepen.io/transportedman/pen/NPWRGq

Basically, you need to add a carousel-wilting class to your carousel so that you have:
<div class="carousel slide carousel-fade">

And then include the following CSS:

 /* 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); } } 

Answer 2

This can be done using only CSS. To change the carousel to a fade transition instead of a slide, use one of the following snippets (LESS or standard CSS).

SMALLER

 // Fade transition for carousel items .carousel { .item { left: 0 !important; .transition(opacity .4s); //adjust timing here } .carousel-control { background-image: none; // remove background gradients on controls } // Fade controls with items .next.left, .prev.right { opacity: 1; z-index: 1; } .active.left, .active.right { opacity: 0; z-index: 2; } } 

Plain CSS:

 /* Fade transition for carousel items */ .carousel .item { left: 0 !important; -webkit-transition: opacity .4s; /*adjust timing here */ -moz-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .carousel-control { background-image: none !important; /* remove background gradients on controls */ } /* Fade controls with items */ .next.left, .prev.right { opacity: 1; z-index: 1; } .active.left, .active.right { opacity: 0; z-index: 2; } 

Answer 3

Some good answers, but the problem with all the solutions I tried is that the images do not disappear in each other. Instead, the first disappears completely, and the next disappears.

After several hours of testing, this solution was found. thanks to http://www.1squarepear.com/adding-a-responsive-bootstrap-image-carousel-that-fades-instead-of-slides/

• In HTML code from .slide to .fade on .carousel element

• Add this to css:

  .carousel.fade { opacity: 1; } .carousel.fade .item { transition: opacity ease-out .7s; left: 0; opacity: 0; /* hide all slides */ top: 0; position: absolute; width: 100%; display: block; } .carousel.fade .item:first-child { top: auto; opacity: 1; /* show first slide */ position: relative; } .carousel.fade .item.active { opacity: 1; }

Answer 4

You can achieve a fade effect (instead of sticking to the default slide) using only css. Add them to the stylesheet.

 .carousel .item { -webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s; } .carousel .active.left { left:0;opacity:0;z-index:2; } .carousel .next { left:0;opacity:1;z-index:1; } 

Answer 5

you can use transition in css3:

 .carousel-fade .carousel-inner .item { -webkit-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0; } .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-control { z-index: 2; } 

or you can read this post => Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out

Answer 6

I used plain.css. It worked great. Please note that I deleted the following from the bootstrap.min.css file:

 /* Fade transition for carousel items */ .carousel .item { left: 0 !important; -webkit-transition: opacity .4s; /*adjust timing here */ -moz-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .carousel-control { background-image: none !important; /* remove background gradients on controls */ } /* Fade controls with items */ .next.left, .prev.right { opacity: 1; z-index: 1; } .active.left, .active.right { opacity: 0; z-index: 2; } 

Answer 7

for bootstrap 3, this is what i used

 .carousel-fade .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; 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; } 

Answer 8

In response to gerardnll, respond to Less code to increase the Bootstrap 3.3.x carousel by a fade effect:

 // // Carousel Fade effect // -------------------------------------------------- // inspired from http://codepen.io/Rowno/pen/Afykb .carousel-fade { .carousel-inner { .item { .opacity(0); .transition-property(opacity); //.transition-duration(.8s); } .active { .opacity(1); &.left, &.right { left: 0; .opacity(0); z-index: 1; } } .next.left, .prev.right { .opacity(1); } } .carousel-control { z-index: 2; } } // WHAT IS NEW IN 3.3: // "Added transforms to improve carousel performance in modern browsers." // now 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, &.prev, &.active.right, &.active.left { .opacity(0); .translate3d(0; 0; 0); } &.next.left, &.prev.right, &.active { .opacity(1); .translate3d(0; 0; 0); } } } } } 

The only thing is the transition duration, which does not work as expected, for longer than .8s (around). Maybe someone has a solution to solve this strange behavior.

Note: LESS code has .transition-duration(.8s); therefore, the default carousel transition duration is used. You can play with the value and see the effect. Long duration (> 0.8) makes the damping effect less smooth.

Answer 9

Check this out: http://codepen.io/Rowno/pen/Afykb

 .carousel-fade { .carousel-inner { .item { opacity: 0; transition-property: opacity; } .active { opacity: 1; } .active.left, .active.right { left: 0; opacity: 0; z-index: 1; } .next.left, .prev.right { opacity: 1; } } 

It works wonderfully, hope it works