引导滑块:当特定的幻灯片处于活动状态时，显示或隐藏滑块

Question

我定义了一个carousel幻灯片，我想获得活动幻灯片，所以我想检查第二张幻灯片是否处于活动状态，当它处于活动状态时，我想显示一个包含一些文本的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

这是不工作的，因为你的条件得到执行正确时，旋转木马开始(我猜)。看一下旋转木马事件。

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