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 one. The problem is that the fade between slides is too quick (less than a second). How do I change that to a longer fade?
Here's my code:
<div class="carousel slide" id="slideshow-carousel-1" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Slide 1 -->
<div class="item item-1 slide-image active">
<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">
<div class="carousel-caption">
<h1 class="title">Caption 1</h1>
</div>
</div>
<!-- End Slide 1 -->
<!-- Slide 2 -->
<div class="item item-2 slide-image">
<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">
<div class="carousel-caption">
<h1 class="title">Or Bottle!</h1>
</div>
</div>
<!-- End Slide 2 -->
</div>
</div>
Here's the CSS:
.carousel-inner > .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 > .item:first-of-type {
position: relative;
}
.carousel-inner > .active {
opacity: 1;
z-index: 3;
}
.carousel-inner > .next.left,
.carousel-inner > .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 > .active.left,
.carousel-inner > .active.right {
z-index: 1;
}
.carousel-control {
z-index: 4;
}