Bootstrap 4 carousel responsive issue in chrome
I have an issue with Bootstrap 4 carousel only in Chrome.
Here is my code:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://placehold.it/1350x350" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/1350x350" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/1350x350" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Here is my violin:
https://jsfiddle.net/benjamin_edwards/1gx43oph/
and here is a picture of the problem:
As you can see, there is Chrome in the left pane and Safari on the right. Chrome only has a blooming issue - has anyone experienced this before?
Greetings,
Ben.
source to share
OK, so I searched the internet and there is a solution for this
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev{
display:block !important;
}
I updated my fiddle here:
https://jsfiddle.net/benjamin_edwards/1gx43oph/
and I got answers from here:
https://github.com/twbs/bootstrap/issues/21611
from my post here:
https://github.com/twbs/bootstrap/issues/21966
Hope this can help others :)
source to share
if you prefer a responsive fixed height carousel, you can use a div with a background skin instead of a regular image like this:
.image {
width: 100%;
height: 650px;
background-position: center;
background-size: cover;
}
<div class="image" style="background-image: url('my-image.jpg')"></div>
I found this solution here: bootstrap, how to make fixed height responsive?
source to share