ブートストラップスライダ：特定のスライドがアクティブなときdivを表示または非表示

Question

カルーセルスライドショーを定義してアクティブなスライドを取得したいので、2番目のスライドがアクティブな場合は表示したいdivにはテキストが含まれ、右の次の矢印は非表示になります。最初のスライドがアクティブなときに、divを非表示にして右矢印を表示したいと思います。ここで

マイJSFIDDLE

は私のHTMLコードです：

<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> 

と私のjqueryのコード：

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

これが動作しないのはなぜ？助けて！

Answer 1

html次のようにします。ドキュメントにIDを追加します。次のように

<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：

$('#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'); 
    } 
    }); 

Answer 2

カルーセルが起動したときにif条件が正しく実行されるため、動作しません（私は推測します）。 Have a look at carousel events。

$('#imagesCarousel').on('slide.bs.carousel', function(event) { 
    if ($(event.relatedTarget).hasClass('check')) { 
    // your desired element is about to get slid in... 
    } 
    else { 
    // its not 
    } 
}); 

$('#imagesCarousel').on('slid.bs.carousel', function(event) { 
    if ($(event.relatedTarget).hasClass('check')) { 
    // your desired element has been slid in 
    } 
    else { 
    // its not 
    } 
});