Bootstrap Carousel

[Crumdidlyumshis]

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]

Hey,

Maybe there are an issue with the Intersection Observer. Can you post a codepen or something similar so i can have a look?

Thanks.

[Crumdidlyumshis]

Sure thing! This is basically a exact mock-up of what I'm working with, just changed images and text/whatnot.

https://codepen.io/crumsack/pen/MWKEjOe

[Crumdidlyumshis]

@geosigno just curious if you stumbled onto any issue related to this? Or is there something I need to try different? I have been messing around with different things and I have not found a fix yet. Thanks!

[geosigno]

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

[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.