title: change color of button when carousel slide linked to it is clicked
body: <p>I have a bootstrap carousel and a range of buttons on top it which represent certain services provided by an organization. I am trying to achieve 2 things here:</p>
  
  <ol>
  <li>(This one is done) When user clicks on button A, then slide linked to button A appears and the color of button A changes indicating that its active.</li>
  <li>(Having problem here) When slide A changes from slide B or whichever, then color of button A (which is linked to slide A) should automatically change indicating that its respective slide has been clicked.</li>
  </ol>
  
  <p>As you can see in this image, when button clicked it turns blue and slide linked to it appears
  <a href="https://i.stack.imgur.com/9spIU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9spIU.png" alt="when button clicked, it turns blue and slide "></a></p>
  
  <p>But here, when I change the slide by using next/prev controllers, buttons are not activated
  <a href="https://i.stack.imgur.com/LUm4a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LUm4a.png" alt="enter image description here"></a></p>
  
  <p>This is what my code looks like</p>
  
  <pre><code>    &lt;nav1&gt;
          &lt;ul class="nav1"&gt;
              &lt;li&gt;&lt;a href="#" data-target="#myCarousel1" data-slide-to="0" class="image1"&gt;&lt;/a&gt;
              &lt;h4&gt;Analytics &amp; &lt;br&gt; Optimization&lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#" data-target="#myCarousel1" data-slide-to="1" class="image2"&gt;&lt;/a&gt;
              &lt;h4&gt;Design&lt;br&gt; Services&lt;/h4&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#" data-target="#myCarousel1" data-slide-to="2" class="image4"&gt;&lt;/a&gt;
              &lt;h4&gt;Web &amp; Mobile&lt;br&gt; Technology&lt;/h4&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#" data-target="#myCarousel1" data-slide-to="3" class="image3"&gt;&lt;/a&gt;
              &lt;h4&gt;Online &lt;br&gt; Marketing&lt;/h4&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#" data-target="#myCarousel1" data-slide-to="4" class="image5"&gt;&lt;/a&gt;
              &lt;h4&gt;Cyber&lt;br&gt; Security&lt;/h4&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#" data-target="#myCarousel1" data-slide-to="5" class="image6"&gt;&lt;/a&gt;
              &lt;h4&gt;Digital&lt;br&gt; Transformation&lt;/h4&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav1&gt;
  
      &lt;div id="myCarousel1" class="carousel slide" data-ride="carousel" data-interval="false"&gt;    
          &lt;!-- Wrapper for slides --&gt;
          &lt;div class="carousel-inner"&gt;     
      &lt;div class="item active"&gt;
              &lt;div class="clearfix"&gt;&lt;img class="img2" src="assets/images/analysis.png"&gt;
          &lt;/div&gt;  
            &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>so on..</p>
  
  <p>Style: </p>
  
  <pre><code>  .nav1 a:active, .nav1 a:focus {
    text-decoration: none;
    color: #8C9EFF;
    background: #80D8FF;
  }
  </code></pre>
  
  <p>I believe its got to do with slide.bs function but I am not able to figure out how!    </p>