如何更改引导程序传送带箭头类

我在右上角带有带有箭头的引导程序传送带。我已经设置了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; 
}

来源

2017-07-18 Elaine Byene

试试这个。我将班级活动更新为班级淡化。并将其更新为welll。尝试：https：//jsfiddle.net/6kjnmbcb/2/ –

我很抱歉，但这远非如此。我实际上想要使用JS来更改类，以便用户在没有幻灯片点击时知道该按钮处于“禁用”状态。 –

您需要使用slide.bs.carousel事件描述bootstrap

$('#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/

来源

2017-07-18 10:06:06 qiAlex

欣赏帮助。非常感谢！ –

任何想法如何做到同一页上的多个传送带？我尝试时无法使用：https：//jsfiddle.net/177eLsmh/ –

您可以处理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'); 
    } 
});

来源

2017-07-18 10:01:11

非常感谢你:) –

如何更改引导程序传送带箭头类

回答

相关问题