There seems to be an issue with the bootstrap carousel where the first slide appears empty initially, but once you slide to the second slide it starts working fine. Navigating through all slides is still possible.
<div id="mediakit_carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mediakit_carousel" data-slide-to="0" class="active"></li>
<li data-target="#mediakit_carousel" data-slide-to="1"></li>
<li data-target="#mediakit_carousel" data-slide-to="2"></li>
<li data-target="#mediakit_carousel" data-slide-to="3"></li>
<li data-target="#mediakit_carousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="active item">
<img src="img/mediakit_image.png" alt="">
</div>
<div class="item">
<img src="img/mediakit_image.png" alt="">
</div>
<div class="item">
<img src="img/mediakit_image.png" alt="">
</div>
<div class="item">
<img src="img/mediakit_image.png" alt="">
</div>
<div class="item">
<img src="img/mediakit_image.png" alt="">
</div>
</div>
</div>
<script>$(window).load(function() {
$('#mediakit_carousel').carousel({
})
});</script>
The above javascript code is being called from an external js file.
Any suggestions or solutions?