如何更改引導程序傳送帶箭頭類

我在右上角帶有帶有箭頭的引導程序傳送帶。我已經設置了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

非常感謝你:) –

如何更改引導程序傳送帶箭頭類

回答

相關問題