Change Bootstrap Carousel Fade Transition

Change Bootstrap Carousel fade transition

Bootstrap 5 Carousel Fade (update 2021)

Bootstrap 5 includes a "fade" effect that can be used by simply adding the carousel-fade class to the Carousel. By default, the transition duration is .6s. To increase the duration, and make the fade between slides slower, override the transition timing on the CSS...

/* change transition duration to control the speed of fade effect */
.carousel-item {
  transition: transform 2.6s ease-in-out;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  transition: opacity 0s 2.6s;
}

Bootstrap 5 Carousel Fade Slower

Bootstrap 4.0 Carousel Fade (original answer)

.carousel-fade .carousel-item {
 opacity: 0;
 transition-duration: .6s;
 transition-property: opacity;
}

.carousel-fade  .carousel-item.active,
.carousel-fade  .carousel-item-next.carousel-item-left,
.carousel-fade  .carousel-item-prev.carousel-item-right {
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-right {
 opacity: 0;
}

.carousel-fade  .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-prev {
 transform: translateX(0);
 transform: translate3d(0, 0, 0);
}

The fade effect was removed from the carousel during the 4.0 Beta and is also not available in 4.0.0. This pull request indicates that the fade effect will return in 4.1 or 4.2. In the meanwhile, the above CSS will work for 4.0.0

https://codeply.com/go/LhLJlldsLN

Bootstrap Carousel Fade Transition

Here's an example of how this can be done with some adjusting to your CSS.

html, body {
    height: 100%;
}
.navbar-brand {
    width: 70px;
    height: 50px;
    background: url('http://matthewjstrauss.com/wp-content/uploads/2013/07/twitter-bootstrap-logo.png') no-repeat center center;
    background-size: 50px;
}
.navbar {
    background-color: #fff;
}
.carousel, .item, .active {
    height: 100%;
}
.carousel-inner {
    height: 100%;
}
.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.carousel.fade {
    opacity: 1;
}
.carousel.fade .item {
    -moz-transition: opacity ease-in-out .7s;
    -o-transition: opacity ease-in-out .7s;
    -webkit-transition: opacity ease-in-out .7s;
    transition: opacity ease-in-out .7s;
    left: 0 !important;
    opacity: 0;
    top: 0;
    position: absolute;
    width: 100%;
    display: block !important;
    z-index: 1;
}
.carousel.fade .item:first-child {
    top: auto;
    position: relative;
}
.carousel.fade .item.active {
    opacity: 1;
    -moz-transition: opacity ease-in-out .7s;
    -o-transition: opacity ease-in-out .7s;
    -webkit-transition: opacity ease-in-out .7s;
    transition: opacity ease-in-out .7s;
    z-index: 2;
}
.carousel-control {
    z-index: 2;
}
footer {
    margin: 0px 25px 25px 25px;
    text-align: center;
}

Here's how you can restructure your carousels markup to work with the CSS now.

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>  <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
            </button> <a class="navbar-brand" href="#"></a> 
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li> <a href="#">About</a> 
                </li>
                <li> <a href="#">Services</a> 
                </li>
                <li> <a href="#">Contact</a> 
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel fade">
    <!-- 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>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://desktop-pictorials.com/SingleScreen/SinglePage01/Island002-1920x1080.jpg');"></div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://img.phombo.com/img1/photocombo/4448/The_Best_HD_HQ_Hi-Res_Wallpapers_Collection_-_Cityscape_by_tonyx__145_pictures-61.jpg_HDTV_monaco_1920x1080.jpg');"></div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('https://interfacelift.com/wallpaper/7yz4ma1/01407_harboursunset_1920x1080.jpg');"></div>
        </div>
    </div>
    <!-- Controls --> <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> 
</header>
<img src="http://placehold.it/2100x500/f00/ffffff One" class="img-responsive" alt="Nope">
<img src="http://placehold.it/2100x500/266080/ffffff One" class="img-responsive" alt="Nope">
<img src="http://placehold.it/2100x500/547842/ffffff One" class="img-responsive" alt="Nope">
<img src="http://placehold.it/2100x500/267842/ffffff One" class="img-responsive" alt="Nope">
<!-- Page Content -->
<div class="container-fluid">
    <hr>
    <!-- Footer -->
    <footer>
        <div class="row">
            <div class="col-lg-12">
                <p>Copyright © Your Website 2014</p>
            </div>
        </div>
        <!-- /.row -->
    </footer>
</div>

A little JS:

  $('.carousel').carousel({
  interval: 5000 //changes the speed
  })

twitter bootstrap's carousel fade transition

Take a look at this fiddle. Unfortunately it doesn't work on any of the currently available versions of Internet Explorer.

Your carousel div only needs an extra class carousel-fade added, for it to work.

[source]

This transition shows the next image and then fades the new image out on top of it. If you want a direct fade out fade in animation, add these lines to the css.

.carousel.carousel-fade .item {
  opacity:0;
}

.carousel.carousel-fade .active.item {
    opacity:1;
}

Bootstrap 4: Carousel Fade Transition Not Working

As you have already noticed, quite a lot of things have been changed in Bootstrap 4. Let me walk you through the approach I took with the solution below.

.fade was renamed to .carousel-fade not to interfere with the default Bootstrap .fade class.
.item was renamed to .carousel-item, since that is the name in Bootsrap 4 for carousel items.
As the positioning of the slides is absolute now because of the fading effect, I added .embed-responsive embed-responsive-16by9 classes to .carousel-inner and also .embed-responsive-item to .carousel-item to preserve the height of the slide container and also to take care of the positioning of the slide items. (In case you want to use images with other aspect ratios, you should change the .embed-responsive-16by9 class. Defaults are listed here.)

So this would be my approach:

.carousel.carousel-fade .carousel-item {    display: block;    opacity: 0;    transition: opacity ease-out .7s;}
.carousel.carousel-fade .carousel-item.active {    opacity: 1 !important;}

<div id="carousel-fade" class="carousel carousel-fade" data-ride="carousel" data-interval="2000">    <ol class="carousel-indicators">        <li data-target="#carousel-fade" data-slide-to="0" class="active"></li>        <li data-target="#carousel-fade" data-slide-to="1"></li>        <li data-target="#carousel-fade" data-slide-to="2"></li>    </ol>
    <div class="carousel-inner embed-responsive embed-responsive-16by9" role="listbox">      <div class="carousel-item embed-responsive-item active">        <img src="http://via.placeholder.com/1600x900/483D8B/ffffff?text=Slide%201" alt="First slide image" class="img-fluid">        <div class="carousel-caption">          <h3>First slide Heading</h3>          <p>First slide Caption</p>        </div>      </div>
      <div class="carousel-item embed-responsive-item">        <img src="http://via.placeholder.com/1600x900/9400D3/ffffff?text=Slide%202" alt="Second slide image" class="img-fluid">        <div class="carousel-caption">          <h3>Second slide Heading</h3>          <p>Second slide Caption</p>        </div>      </div>
      <div class="carousel-item embed-responsive-item">        <img src="http://via.placeholder.com/1600x900/FF1493/ffffff?text=Slide%203" alt="Third slide image" class="img-fluid">        <div class="carousel-caption">          <h3>Third slide Heading</h3>          <p>Third slide Caption</p>        </div>      </div>    </div>
    <a class="carousel-control-prev" href="#carousel-fade" role="button" data-slide="prev">        <span class="carousel-control-prev-icon" aria-hidden="true"></span>        <span class="sr-only">Previous</span>    </a>    <a class="carousel-control-next" href="#carousel-fade" role="button" data-slide="next">        <span class="carousel-control-next-icon" aria-hidden="true"></span>        <span class="sr-only">Next</span>    </a></div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

Fade transition for Carousel in Bootstrap 4 Beta

Here's a solution that works with Bootstrap 4 Beta.

.carousel-fade .carousel-item {  display: block;  position: relative;  opacity: 0;  transition: opacity .75s ease-in-out;}
.row {  width: 100%;}
.carousel-fade .carousel-item.active {  opacity: 1;  display: block;}.row {  width: 100%;}.carousel {  position: relative;  top: 0;  left: 0;  background-color: lightskyblue;}.carousel-inner {  background-color: pink;  height: 100%;}.carousel-item {  background-color: yellow;  opacity: .5; /*Added clone in this line*/}a.carousel-control-next:link, a.carousel-control-prev:link {  background-color: transparent;  text-decoration: none;  opacity: .5;}a.carousel-control-next:hover, a.carousel-control-prev:hover  {  background-color: transparent;  text-decoration: none;  opacity: 1;}.carousel-control-next-icon, .carousel-control-prev-icon {  position:relative;  background-image: none;}    .carousel-control-next-icon:before {  top:0;  left:-5px;  padding-right:10px; }.carousel-control-prev-icon:before {  top:0;  left:-5px;  padding-right:10px;}.sidebar {  background-color: #e1e1e1;}

<head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
</head>

<div class="container">  <div class="row">    <div class="col-lg-8">  <div id="carousel" class="carousel carousel-fade" data-ride="carousel">   <div class="carousel-inner" role="listbox">    <div class="carousel-item active">     <img class="d-block w-100" src="https://i.imgur.com/FmtTabr.jpg" alt="First slide">    </div> <!-- close carousel-item 1 -->    <div class="carousel-item" style="position: absolute; top:0px; width: 100% ; height: 100%">     <img class="d-block w-100" src="https://i.imgur.com/UioJ4ix.jpg" alt="Second slide">    </div> <!-- close carousel-item 2 -->    <div class="carousel-item" style="position: absolute; top:0px; width: 100% ; height: 100%">     <img class="d-block w-100" src="https://i.imgur.com/UkPZYcB.jpg" alt="Third slide">    </div> <!-- close carousel-item 3 -->   </div> <!-- close carousel-inner -->
   <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">    <span class="carousel-control-prev-icon" aria-hidden="true"></span>    <span class="sr-only">Previous</span>   </a>   <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">    <span class="carousel-control-next-icon" aria-hidden="true"></span>    <span class="sr-only">Next</span>   </a>  </div> <!-- close carousel -->
  <table class="table table-bordered mt-3">   <thead class="thead-default">    <tr>     <th colspan="2" class="text-center">Table head</th>     </tr>   </thead>   <tbody>    <tr>     <td>content</td>     <td>content</td>    </tr>    <tr>     <td>content</td>     <td>content</td>    </tr>   </tbody>  </table>    </div> <!-- end col-lg-8 -->    <div class="col-lg-4 sidebar">     <p>Sidebar</p>    </div> <!-- close sidebar -->  </div>  <!-- close row --></div> <!-- close container -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

How can I change the sliding animation to fade in/out with transition on Bootstrap3 Carousel

Try this carousel fade example. It will show you how to change opacity for prev and next buttons.

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

http://bootply.com/86170

Change Bootstrap Carousel Fade Transition