xesa xesa - 3 months ago 23
jQuery Question

bootstrap slider: when a specific slide is active show or hide divs

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.

My JSFIDDLE

Here is my HTML code:

<div id="imagesCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#imagesCarousel" data-slide-to="0" class="active"></li>
<li data-target="#imagesCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container-fluid">
<div class="row">
<img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg">
<img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg">
</div>
</div>
</div>
<div class="item check" >
<div class="container-fluid">
<div class="row">
<img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589722k.jpg">
<img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589722k.jpg" >
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#imagesCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#imagesCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

<div class="features-text" style="display:none;">
This is displayed only when second slide is active
</div>


and my jquery code:

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


Why this is not working ? Help!

Answer

html as follow:I add some id to the document.

<div id="imagesCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div id="text"></div>
      <ol class="carousel-indicators">
        <li data-target="#imagesCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#imagesCarousel" data-slide-to="1"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <div class="container-fluid">
            <div class="row">
              <img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg">
              <img  class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg">
              <div class="carousel-caption">
                slide1
              </div>
            </div>
          </div>
        </div>
        <div id="item2" class="item check" >
          <div class="container-fluid">
            <div class="row">
              <img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589722k.jpg">
              <img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589722k.jpg" >
                            <div class="carousel-caption">
                slide2
              </div>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#imagesCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#imagesCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

<div id="text2" class="features-text hidden" style="">
This is displayed only when second slide is active
</div>

js as follow :

$('#text').html($('.active > .carousel-caption').html());
  $('.carousel').on('slid.bs.carousel', function() {
    if ($('#item2').hasClass('active')) {
     # item2 is active, just remove hidden attr of text2 to show the text2.
     $('#text2').removeClass('hidden');
    } else {
     $('#text2').addClass('hidden');
    }
  });