title: Bootstrap Carousel - how to fade between slides slowly
body: <p>I'm using the latest Bootstrap Carousel and need to fade slowly (about 5s) between slides. I've looked at a number of examples, and have tried to implement this <a href="https://stackoverflow.com/questions/27861435/bootstrap-carousel-refuses-to-transition-smoothly-after-css-adjustments/27870468">one</a>. The problem is that the fade between slides is too quick (less than a second). How do I change that to a longer fade? </p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;div class="carousel slide" id="slideshow-carousel-1" data-ride="carousel"&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
          &lt;!-- Slide 1 --&gt;
          &lt;div class="item item-1 slide-image active"&gt;
              &lt;img class="img-responsive bg-item parallax" data-speed="1" data-width="1980" data-height="1485" src="~/images/slideshow/bottle1.png" alt="Slide 1 Background"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h1 class="title"&gt;Caption 1&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- End Slide 1 --&gt;
  
          &lt;!-- Slide 2 --&gt;
          &lt;div class="item item-2 slide-image"&gt;
              &lt;img class="img-responsive bg-item parallax" data-speed="1" data-width="1980" data-height="1485" src="~/images/slideshow/bottle2.jpg" alt="Slide 2 Background"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h1 class="title"&gt;Or Bottle!&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- End Slide 2 --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>.carousel-inner &gt; .item {
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    position: absolute;
    z-index: 0;
    -webkit-transition: opacity 5s ease;
         -o-transition: opacity 5s ease;
            transition: opacity 5s ease;
    -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
  }
  .carousel-inner &gt; .item:first-of-type {
    position: relative;
  }
  .carousel-inner &gt; .active {
    opacity: 1;
    z-index: 3;
  }
  .carousel-inner &gt; .next.left,
  .carousel-inner &gt; .prev.right {
    -webkit-transition: opacity 0.6s ease-in-out;
         -o-transition: opacity 0.6s ease-in-out;
            transition: opacity 0.6s ease-in-out;
    opacity: 1;
    left: 0;
    z-index: 2;
  }
  .carousel-inner &gt; .active.left,
  .carousel-inner &gt; .active.right {
    z-index: 1;
  }
  .carousel-control {
    z-index: 4;
  }
  </code></pre>