Open
Description
Not sure if I am missing something, but for whatever reason, the first image of a bootstrap carousel is working on scroll, but the rest of them don't.
JS:
const images = document.querySelectorAll('.parallax');
new simpleParallax(images);
HTML:
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<!-- Start Carousel Indicator Loop -->
<li data-target="#carousel" data-slide-to="0" class=""></li>
<li data-target="#carousel" data-slide-to="1" class="active"></li>
</ol>
<div class="carousel-inner far-banner-carousel-inner">
<div class="carousel-item">
<div class="simpleParallax" style="overflow: hidden;">
<img width="1920" height="560" src="image1.jpg" class="parallax wp-post-image" alt="">
</div>
<div class="carousel-caption text-left">
<div class="container">
<h3 class="h1">Slide One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt nisl vitae nisl tempor, vel rhoncus dolor cursus. In metus sem, fermentum ac dignissim at, ultricies sit amet est. Aenean tellus risus, feugiat a cursus ut, imperdiet vel lacus. Phasellus pulvinar semper iaculis. Donec faucibus condimentum elit vitae cursus. Nunc ultrices in arcu quis varius.</p>
<p></p>
</div>
</div>
</div>
<div class="carousel-item active">
<div class="simpleParallax" style="overflow: hidden;">
<img width="1920" height="560" src="image2.jpg" class="parallax wp-post-image" alt="">
</div>
<div class="carousel-caption text-left">
<div class="container">
<h3 class="h1">Slide Two</h3>
<p>Etiam a est in elit mollis rutrum. Praesent ultricies urna at diam vulputate scelerisque ac quis tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce tincidunt mi et leo consectetur, a ullamcorper elit aliquet. Donec aliquam risus eu vestibulum sollicitudin.</p>
<p></p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel" 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="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I am using latest Bootstrap v4.5.0
Any idea what I can do to fix this?
PS: Awesome work on this wonderful script! 👏