I got this working for a single carousel. However, when there's more than 1 carousel, it doesn't work.

Could some help? It works only when one carousel is added.

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

```