幻灯片更改时更改Bootstrap的轮播箭头颜色

时间：2017-07-19 11:45:17

标签： javascript jquery css twitter-bootstrap

我让这个工作单个旋转木马。但是，当有超过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'
  }
})

3 个答案:

答案 0 :(得分：2)

检查以下解决方案。您正在为导致此问题的两个轮播使用相同的类。

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

var controls = document.querySelectorAll('.first_carousel');
  if (e.direction === 'left') {
		controls[0].className = 'first_carousel class-active';
  }
  if (e.direction === 'right') {
		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') {
		controls[0].className = 'second_carousel class-active';
  }
  if (e.direction === 'right') {
		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> 
        		 &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> 
        		 &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>

答案 1 :(得分：1)

在第二个轮播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
  }
})

答案 2 :(得分：0)

尝试将<i class="controls class-fade"> &lt;&lt; </i>更改为<i class="controls class-active"> &lt;&lt; </i>

相关问题
最新问题