javascript - 如何更改 Bootstrap 轮播箭头类

Question

我有一个 Bootstrap 轮播，右上角有箭头。我设置了 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/