如何更改引导轮播箭头类答案

【问题标题】：how to change bootstrap carousel arrow class如何更改引导轮播箭头类
【发布时间】：2017-07-18 18:12:42
【问题描述】：

我有这个引导轮播，右上角有箭头。我设置了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;
}

【问题讨论】：

试试这个。我将 class-active 更新为 class-fade。并更新了css。试穿：jsfiddle.net/6kjnmbcb/2
很抱歉，但远非如此。我实际上想使用 JS 更改类，以便用户知道按钮是disabled，当没有幻灯片可以点击时。

标签： javascript jquery css twitter-bootstrap

【解决方案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/

【讨论】：

感谢您的帮助。非常感谢！
知道如何在同一页面上处理多个轮播吗？我尝试时它不起作用：jsfiddle.net/177eLsmh

【解决方案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');
    }
});

【讨论】：