title: jQuery Boostrap Carousel Show content according to current slide
body: <p>I am using bootstrap jquery carousel to slide content. I also have some content below the carousel. This content should hide/show according to which slide is showing.</p>
  
  <p>Since bootstrap uses active on the current slide I wrote the code below. 
  Now this works when I use the arrows. But if I use keyboard arrows for next and previous, or when the slide is autoplay, the content does not show/hide accordingly.</p>
  
  <p>jQuery:</p>
  
  <pre><code>    $('#success-stories .carousel-control.left, #success-stories .carousel-control.right').click(function() {
          if ( $('#success-stories .item1').hasClass("active") ) {
              $('.success1').removeClass("active"); 
              $('.success2').addClass("active"); 
          }
          if ( $('#success-stories .item2').hasClass("active") ) {
              $('.success2').removeClass("active"); 
              $('.success1').addClass("active"); 
          }
  
      });
  </code></pre>
  
  <p>Thanks</p>