title: Change content based on active Bootstrap Carousel Slide
body: <p>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? </p>
  
  <p>If the first slide is active, I want to show div One, if the second slide is active, I want to show div Two. </p>
  
  <p>I think I somehow just need to get the active index of the carousel to write my js script? </p>
  
  <pre><code>&lt;div class="bd-example"&gt;
          &lt;div id="carouselExampleCaptions" class="carousel slide" data-interval="false"&gt;
            &lt;ol class="carousel-indicators"&gt;
              &lt;li data-target="#carouselExampleCaptions" data-slide-to="0" onclick="changeContentBasedOnActiveSlide()" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#carouselExampleCaptions" data-slide-to="1" onclick="changeContentBasedOnActiveSlide()"&gt;&lt;/li&gt;
            &lt;/ol&gt;
            &lt;div class="carousel-inner"&gt;
              &lt;div class="carousel-item active" id="one"&gt;
                &lt;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="..."&gt;
                &lt;div class="carousel-caption d-none d-md-block"&gt;
                  &lt;h5&gt;One&lt;/h5&gt;
                  &lt;p&gt;Nulla vitae elit libero, a pharetra augue mollis interdum.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="carousel-item" id="two"&gt;
                &lt;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="..."&gt;
                &lt;div class="carousel-caption d-none d-md-block"&gt;
                  &lt;h5&gt;Two&lt;/h5&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;a class="carousel-control-prev" href="#carouselExampleCaptions" role="button"  onclick="changeContentBasedOnActiveSlide()" data-slide="prev"&gt;
              &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
          &lt;/button&gt;
            &lt;a class="carousel-control-next" href="#carouselExampleCaptions" role="button" onclick="changeContentBasedOnActiveSlide()" data-slide="next"&gt;
              &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Next&lt;/span&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <pre><code>&lt;div id="divOne"&gt;
    Slide One
  &lt;/div&gt;
  
  &lt;div id="divTwo"&gt;
    Slide Two
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks to the answer I worked something out. This works for me...for sure it can be improved...</p>
  
  <pre><code>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.")
      }
  
  }
  </code></pre>