Bootstrap Carousel

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! 👏

[geosigno]

At the moment simpleParallax is initializing, it will check that every image is loaded. The non-visible images of the carousel are loaded but hidden because of a parent opacity 0. So the plugin is unable to get image information via getBoundingClientRect(). This is a bit problematic… I’ll try to find a workaround.

[geosigno]

Sorry for the lateness, i’ll try to find some time to look at this one.