Change content based on active Bootstrap Carousel Slide

Question

I just took the basic carousel from the bootstrap website and want to integrate it into my web application. My problem is that I want to adjust the content of my website based on the current active slide of the carousel...is that possible?

If the first slide is active, I want to show div One, if the second slide is active, I want to show div Two.

I think I somehow just need to get the active index of the carousel to write my js script?

<div class="bd-example">
        <div id="carouselExampleCaptions" class="carousel slide" data-interval="false">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" onclick="changeContentBasedOnActiveSlide()" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1" onclick="changeContentBasedOnActiveSlide()"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active" id="one">
              <img src="https://images.squarespace-cdn.com/content/v1/5600f472e4b0a4c5b4e2f083/1556255337364-97VLFN57A2DNWR9UQOB8/ke17ZwdGBToddI8pDm48kNvT88LknE-K9M4pGNO0Iqd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1USOFn4xF8vTWDNAUBm5ducQhX-V3oVjSmr829Rco4W2Uo49ZdOtO_QXox0_W7i2zEA/40743.jpg?format=2500w" class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5>One</h5>
                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
              </div>
            </div>
            <div class="carousel-item" id="two">
              <img src="https://images.squarespace-cdn.com/content/v1/5600f472e4b0a4c5b4e2f083/1556255337364-97VLFN57A2DNWR9UQOB8/ke17ZwdGBToddI8pDm48kNvT88LknE-K9M4pGNO0Iqd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1USOFn4xF8vTWDNAUBm5ducQhX-V3oVjSmr829Rco4W2Uo49ZdOtO_QXox0_W7i2zEA/40743.jpg?format=2500w" class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5>Two</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button"  onclick="changeContentBasedOnActiveSlide()" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </button>
          <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" onclick="changeContentBasedOnActiveSlide()" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>

<div id="divOne">
  Slide One
</div>

<div id="divTwo">
  Slide Two
</div>

Thanks to the answer I worked something out. This works for me...for sure it can be improved...

function changeContentBasedOnActiveSlide(){

    var slideOne = document.getElementById("one").className;
    var slideTwo = document.getElementById("two").className;

    var one = document.getElementById("divOne");
    var two = document.getElementById("divTwo");

    if(slideOne.localeCompare("carousel-item active") === 0){
        one.style.display = "none";
        two.style.display = "block";
    } else if(slideTwo.localeCompare("carousel-item active") === 0){
        one.style.display = "block";
        two.style.display = "none";
    } else {
        console.log("No active slide.")
    }

}

Answer 1

You may add a function to next/prev buttons. Add additional classes to both divs with carousel-item to make it unique. And after pressing next/prev u check if active div has that unique class and then distplay div class "one" or "two".