The below code worked perfectly fine for me using Bootstrap version 3. However, since upgrading to Bootstrap 4 Beta2 the fade transition does not work. It just jumps to the next image rather than a smooth transition:
HTML
<div id="carousel1" class="carousel fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="images/a.jpg" alt="First slide image" class="center-block">
<div class="carousel-caption">
<h3>First slide Heading</h3>
<p>First slide Caption</p>
</div>
</div>
<div class="item"><img src="images/b.jpg" alt="Second slide image" class="center-block">
<div class="carousel-caption">
<h3>Second slide Heading</h3>
<p>Second slide Caption</p>
</div>
</div>
<div class="item"><img src="images/c.jpg" alt="Third slide image" class="center-block">
<div class="carousel-caption">
<h3>Third slide Heading</h3>
<p>Third slide Caption</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
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;
}
JS
$(function(){
$('.carousel').carousel({
interval: 6000
});
});
Looking around and it seems that there has been a few issues with the recent bootstrap upgrade, any help would be appreciated.
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..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:
Two more notes:
data-interval
attribute of the.carousel
.