I'm looking to enhance my webpage with a bootstrap carousel, which is pretty standard. However, I want the content under each slide to change dynamically, but I'm struggling to make it work. As a newbie, I could use some guidance.
I've attempted nesting the div within the section as advised in this Stack Overflow thread, but it doesn't quite align with my vision. Currently, the section remains the same for all slides since it's a single-page layout... Is there a way to sync the section changes with the slide transitions?
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://images.pexels.com/photos/2053922/pexels-photo-2053922.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')">
<div class="slide__content">
<h2 class="slide__heading">First Slide</h2>
<p class="slide__text">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- Page Content -->
<section class="py-5">
<div class="container">
<h1 class="display-4">Full Page Image Slider</h1>
<p class="lead">The goal is to have the section content "move" along with each slide, so the text can be tailored specifically to each one.</p>
</div>
</section>
It would be great if the section content can seamlessly transition with each slide.