bootstrap slider: when a specific slide is active show or hide divs
<p>I defined a carousel slideshow and I want to get the active slide, so I want to check if the second slide is active when it is, I want to display a div that contains some text  and to hide the next arrow on the right. When the first slide is active I want to hide the div and show the right arrow.</p>

<p>My <a href="http://jsfiddle.net/2PWYJ/12/#&amp;togetherjs=kTqBu39L6m" rel="nofollow">JSFIDDLE</a></p>

<p>Here is my HTML code: </p>

<pre><code>&lt;div id="imagesCarousel" class="carousel slide" data-ride="carousel" data-interval="false"&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#imagesCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#imagesCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;/ol&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
        &lt;div class="item active"&gt;
          &lt;div class="container-fluid"&gt;
            &lt;div class="row"&gt;
              &lt;img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg"&gt;
              &lt;img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item check" &gt;
          &lt;div class="container-fluid"&gt;
            &lt;div class="row"&gt;
              &lt;img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589722k.jpg"&gt;
              &lt;img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589722k.jpg" &gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="left carousel-control" href="#imagesCarousel" role="button" data-slide="prev"&gt;
        &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#imagesCarousel" role="button" data-slide="next"&gt;
        &lt;span class="glyphicon glyphicon-chevron-right" 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 class="features-text" style="display:none;"&gt;
This is displayed only when second slide is active
&lt;/div&gt;
</code></pre>

<p>and my jquery code: </p>

<pre><code>if($('#imagesCarousel .carousel inner').children('.check').hasClass('active')) {
    $('.features-text').css('display', 'block');
    $('.glyphicon-chevron-right').css('display', 'none');
}
</code></pre>

<p>Why this is not working ? Help!</p>