Question

我在右上角有一个带箭头的自举旋转木马。我已设置data-wrap="false"，以便在到达轮播结束时停止。此外，当第一个旋转木马开始时，左箭头变为活动状态。

以下是我想要做的事情：当幻灯片变为活动状态时，我希望课程class-fade更改为class-active。然后当它再次变为非活动状态时更改为class-fade。

我希望这是有道理的。

JSFIDDLE：https://jsfiddle.net/6kjnmbcb/

HTML：

<div class="container">
    <p>When the carousel comes to an end, change the class <strong>"class-active"</strong> to <strong>"class-fade"</strong>.
        <span class="pull-right">
                        <a class="" href="#CaseCarousel" data-slide="prev"><i class="class-fade"> << </i></a> 
                         &nbsp; &nbsp; 
                        <a class="" href="#CaseCarousel" data-slide="next"><i class="class-active"> >> </i></a>
                    </span>
    </p>
    <hr />
    <div class="row">
        <div class="carousel slide" data-interval="false" data-wrap="false" id="CaseCarousel">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-xs-6">
                        <p>
                            Slide1 goes here
                        </p>
                    </div>
                    <div class="col-xs-6">
                        <p>
                            Slide2 goes here
                        </p>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-6">
                        <p>
                            Slide3 goes here
                        </p>
                    </div>
                    <div class="col-xs-6">
                        <p>
                            Slide4 goes here
                        </p>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-6">
                        <p>
                            Slide5 goes here
                        </p>
                    </div>
                    <div class="col-xs-6">
                        <p>
                            Slide6 goes here
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.class-fade {
  color: grey;
}
.class-active {
  color: red;
}

Answer 1

您需要使用bootstrap

中描述的slide.bs.carousel事件

$('#CaseCarousel').on('slide.bs.carousel', function (e) {
  var controls = document.querySelectorAll('.controls');
  if (e.direction === 'left') {
    controls[0].className = 'controls class-active';
  }
  if (e.direction === 'right') {
    controls[1].className = 'controls class-active'
  }

  var inner = document.querySelector('.carousel-inner');
  if (e.relatedTarget == inner.lastElementChild) {
    controls[1].className = 'controls class-fade'
  }
  if (e.relatedTarget == inner.firstElementChild) {
    controls[0].className = 'controls class-fade'
  }
})

有一个完整的解决方案

https://jsfiddle.net/oeraa2kL/2/

Answer 2

您可以处理slide.bs.carousel事件：

看看这个小提琴：https://jsfiddle.net/BaobabCoder/7756yuzb/1/

$(document).on('slide.bs.carousel', '.carousel', function(e) {
    var slidesLength = $(this).find('.item').length;
    var slideFrom = $(this).find('.active').index();
    var slideTo = $(e.relatedTarget).index();
    if(slideFrom === 0 || slideTo === 0) {
        $('a[href="#CaseCarousel"][data-slide="prev"] i:eq(0)').toggleClass('class-fade');
      $('a[href="#CaseCarousel"][data-slide="prev"] i:eq(0)').toggleClass('class-active');
    }
    else if(slideFrom === slidesLength || slideTo === slidesLength) {
        $('a[href="#CaseCarousel"][data-slide="next"] i:eq(0)').toggleClass('class-fade')
      $('a[href="#CaseCarousel"][data-slide="next"] i:eq(0)').toggleClass('class-active');
    }
});

如何更改bootstrap轮播箭头类

2 个答案: