i have a carousel from bootstrap all setup - now i want it not to change when not visible, because i have different aspect ratio pictures in it so it messes with the body if its not visible. I tried the following code before my body tag:

<script>
    let myCarousel = document.querySelector('#carouselExampleFade')
    console.log(myCarousel)
    let carousel = bootstrap.Carousel.getInstance(myCarousel)
    console.log(carousel)
    carousel.nextWhenVisible()
    console.log("Next when visible")

</script>

the first log shows that js gets my carousel correctly. however, on the second log it says that its "null", and therefore cant apply nextwhenvisible. I use Bootstrap 5.