幻燈片更改時更改Bootstrap的旋轉木馬箭頭顏色

Question

我得到了這個工作的單個旋轉木馬。但是，當有超過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

檢查下面的解決方案。您正在使用相同的課程來解決導致此問題的兩個輪播。

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

嘗試改變<i class="controls class-fade"> &lt;&lt; </i>到<i class="controls class-active"> &lt;&lt; </i>

Answer 3

在你的第二個傳送帶on slide功能，您需要編輯您正在使用訪問controls數組的索引值，因爲有數組中4所控制。你還需要確保你所定位的正確'.carousel-inner'使.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 
    } 
})