スライドが変更されたときにブートストラップのカルーセルの矢印の色を変更します

Question

私はこれを単一のカルーセルのために働かせました。しかし、1台以上のカルーセルがある場合、動作しません。

いくつかお手伝いできますか？ 1つのカルーセルが追加された場合にのみ機能します。

JSFIDDLE：https://jsfiddle.net/177eLsmh/

HTML

<span class="pull-right"> 
    <a class="" href="#TeamCarousel" data-slide="prev"><i class="controls class-fade"> << </i></a> 
       &nbsp; &nbsp; 
    <a class="" href="#TeamCarousel" data-slide="next"><i class="controls class-active"> >> </i></a> 
</span> 

<hr /> 
     <div class="row"> 
      <div class="carousel slide" data-interval="false" data-wrap="false" id="TeamCarousel"> 
       <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 class="item"> 
         <div class="col-xs-6"> 
          <p> 
           Slide7 goes here 
          </p> 
         </div> 
         <div class="col-xs-6"> 
          <p> 
           Slide8 goes here 
          </p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

<span class="pull-right"> 
    <a class="" href="#Team1Carousel" data-slide="prev"><i class="controls class-fade"> << </i></a> 
       &nbsp; &nbsp; 
    <a class="" href="#Team1Carousel" data-slide="next"><i class="controls class-active"> >> </i></a> 
</span> 

<hr /> 
     <div class="row"> 
      <div class="carousel slide" data-interval="false" data-wrap="false" id="Team1Carousel"> 
       <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 class="item"> 
         <div class="col-xs-6"> 
          <p> 
           Slide7 goes here 
          </p> 
         </div> 
         <div class="col-xs-6"> 
          <p> 
           Slide8 goes here 
          </p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

CSS

.class-fade { 
    color: grey; 
} 
.class-active { 
    color: red; 
} 

JS

$('#TeamCarousel').on('slide.bs.carousel', function (e) { 
var inner = document.querySelector('.carousel-inner'); 

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' 
    } 

    if (e.relatedTarget == inner.lastElementChild) { 
    controls[1].className = 'controls class-fade' 
    } 
    if (e.relatedTarget == inner.firstElementChild) { 
    controls[0].className = 'controls class-fade' 
    } 
}) 
$('#Team1Carousel').on('slide.bs.carousel', function (e) { 
var inner = document.querySelector('.carousel-inner'); 

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' 
    } 

    if (e.relatedTarget == inner.lastElementChild) { 
    controls[1].className = 'controls class-fade' 
    } 
    if (e.relatedTarget == inner.firstElementChild) { 
    controls[0].className = 'controls class-fade' 
    } 
}) 

Answer 1

チェックを作業しているように、あなたは正しい'.carousel-inner'をターゲットにしていることを確認する必要があります。この問題を引き起こしていた両方のカルーセルに同じクラスを使用していました。 JSFiddleで

$('#TeamCarousel').on('slide.bs.carousel', function (e) { 
 
var inner = document.querySelector('#first-carousel-inner'); 
 

 
var controls = document.querySelectorAll('.first_carousel'); 
 
    if (e.direction === 'left') { 
 
\t \t controls[0].className = 'first_carousel class-active'; 
 
    } 
 
    if (e.direction === 'right') { 
 
\t \t controls[1].className = 'first_carousel class-active' 
 
    } 
 
    
 
    if (e.relatedTarget == inner.lastElementChild) { 
 
    controls[1].className = 'first_carousel class-fade' 
 
    } 
 
    if (e.relatedTarget == inner.firstElementChild) { 
 
    controls[0].className = 'first_carousel class-fade' 
 
    } 
 
}) 
 
$('#Team1Carousel').on('slide.bs.carousel', function (e) { 
 
var inner = document.querySelector('#second-carousel-inner'); 
 

 
var controls = document.querySelectorAll('.second_carousel'); 
 
    if (e.direction === 'left') { 
 
\t \t controls[0].className = 'second_carousel class-active'; 
 
    } 
 
    if (e.direction === 'right') { 
 
\t \t controls[1].className = 'second_carousel class-active' 
 
    } 
 
    
 
    if (e.relatedTarget == inner.lastElementChild) { 
 
    controls[1].className = 'second_carousel class-fade' 
 
    } 
 
    if (e.relatedTarget == inner.firstElementChild) { 
 
    controls[0].className = 'second_carousel class-fade' 
 
    } 
 
})

.class-fade { 
 
    color: grey; 
 
} 
 
.class-active { 
 
    color: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<span class="pull-right"> 
 
    <a class="" href="#TeamCarousel" data-slide="prev"><i class="controls class-fade first_carousel"> << </i></a> 
 
     \t \t &nbsp; &nbsp; 
 
    <a class="" href="#TeamCarousel" data-slide="next"><i class="controls class-active first_carousel"> >> </i></a> 
 
</span> 
 

 
<hr /> 
 
     <div class="row"> 
 
      <div class="carousel slide" data-interval="false" data-wrap="false" id="TeamCarousel"> 
 
       <div class="carousel-inner" id="first-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 class="item"> 
 
         <div class="col-xs-6"> 
 
          <p> 
 
           Slide7 goes here 
 
          </p> 
 
         </div> 
 
         <div class="col-xs-6"> 
 
          <p> 
 
           Slide8 goes here 
 
          </p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 
<span class="pull-right"> 
 
    <a class="" href="#Team1Carousel" data-slide="prev"><i class="controls class-fade second_carousel"> << </i></a> 
 
     \t \t &nbsp; &nbsp; 
 
    <a class="" href="#Team1Carousel" data-slide="next"><i class="controls class-active second_carousel"> >> </i></a> 
 
</span> 
 

 
<hr /> 
 
     <div class="row"> 
 
      <div class="carousel slide" data-interval="false" data-wrap="false" id="Team1Carousel"> 
 
       <div class="carousel-inner" id="second-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 class="item"> 
 
         <div class="col-xs-6"> 
 
          <p> 
 
           Slide7 goes here 
 
          </p> 
 
         </div> 
 
         <div class="col-xs-6"> 
 
          <p> 
 
           Slide8 goes here 
 
          </p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 2

に試してみてください配列内の4つのコントロールがあるとして、あなたは、あなたがcontrols配列にアクセスするために使用しているインデックス値を編集する必要が<i class="controls class-fade"> &lt;&lt; </i>あなたの第二のカルーセルon slide機能で

Answer 3

<i class="controls class-active"> &lt;&lt; </i>に変更。また.lastElementChildと.firstElementChildが解決以下の適切

$('#Team1Carousel').on('slide.bs.carousel', function (e) { 
console.log(e.relatedTarget); 
var inner = document.querySelector('#Team1Carousel .carousel-inner'); 

var controls = document.querySelectorAll('.controls'); 
    if (e.direction === 'left') { 
     controls[2].className = 'controls class-active'; //changed from controls[0].className 
    } 
    if (e.direction === 'right') { 
     controls[3].className = 'controls class-active' //changed from controls[1].className 
    } 

    if (e.relatedTarget == inner.lastElementChild) { 
    controls[3].className = 'controls class-fade' //changed from controls[1].className 
    } 
    if (e.relatedTarget == inner.firstElementChild) { 
    controls[2].className = 'controls class-fade'//changed from controls[0].className 
    } 
})