Change content based on active Bootstrap Carousel Slide

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">
              <ol class="carousel-indicators">
                <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
              </ol>
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <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">
                  <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" 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="#carouselExampleCaptions" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>

<div class="One">
    Slide One
</div>

<div class="Two">
    Slide Two
</div>