Bootstrap Carousel - Controls only work for the first carousel - html

Question

I am developing a website for a Real Estate company and I am having problems with Bootstrap's Carousel controls.
My goal is to have a row with three different columns and a Carousel in each column. I get this to work, the problem is that when I get the 3 carousels in their corresponding columns, the controls of the Carousel no.2 and the Carousel no.3 activate the Carousel no.1 and not the Carousel where they belong.
Here is my code:
<div class="row">
<div class="col-md-4">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/400/400/" alt="...">
</div>
<div class="item">
<img src="https://dummyimage.com/400x400/000/fff" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--FIRST COLUMN FINISHES HERE-->
<!--SECOND COLUMN STARTS HERE-->
<div class="col-md-4">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/400/400/" alt="...">
</div>
<div class="item">
<img src="https://dummyimage.com/400x400/000/fff" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--SECOND COLUMN FINISHES HERE-->
<!--THIRD COLUMN STARTS HERE-->
<div class="col-md-4">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/400/400/" alt="...">
</div>
<div class="item">
<img src="https://dummyimage.com/400x400/000/fff" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Do you guys know why this is happening? What do I have to do to make the controls activate their own carousel and not Carousel number 1?
I hope I was clear and somewhat easy to understand. Thank you in advance for your help.

Answer 1

Because you have used the same IDs for all the three carousels. And by default only the first ID element on the DOM would be selected (First Slider in your case).
Try updating your code like this -
<a class="left carousel-control" href="#carousel-one" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-one" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
Similarly, please update the ID from carousel-example-generic to carousel-one carousel-two and carousel-three respectively for your three carousels. And also update the href as I did in the code above.
Please let me know if the problem still persist.

Answer 2

All your carousels have same id. Put them unique id and also change in controls with new id's. th