comment changer carrousel bootstrap arrow classe

Question

J'ai ce carrousel bootstrap avec des flèches dans le coin en haut à droite. J'ai mis data-wrap="false" de sorte qu'il s'arrête quand il atteint la fin du carrousel. En outre, la flèche gauche devient active lorsque le premier carrousel commence.

Voici ce que je veux faire: Je veux que la classe class-fade passe à class-active lorsque la diapositive devient active. Ensuite, passez à class-fade lorsqu'il redevient non actif.

J'espère que cela a du sens.

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

Vous devez utiliser slide.bs.carousel événement décrit dans 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' 
    } 
}) 

Il y a une solution complète

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

Answer 2

Vous pouvez gérer l'événement slide.bs.carousel:

Jetez un oeil à ce violon: 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'); 
    } 
});