Bootstrap 3 carousel controls and indicators not working

Question

I scratch my head because the links to the carousel control (and indicator) of Bootstrap 3 do not work on my page. It was a simple copy-paste from documents + a small CSS setting. The code can be seen here http://bevog.si.bitcloud.nine.ch/ (#gallery).

UPDATE:

Carousel Initialization Code

/* GALLERY */ $('#gallery-carousel').carousel() 

Carousel marking

 <div id="gallery-carousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#bevog-image-1" data-slide-to="0" class="active"></li> <li data-target="#bevog-image-2" data-slide-to="1"></li> <li data-target="#bevog-image-3" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active" id="bevog-image-1"> <img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title"> </div> <div class="item" id="bevog-image-2"> <img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title"> </div> <div class="item" id="bevog-image-3"> <img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title"> </div> </div> <a class="left carousel-control" data-slide="prev" href="#"><span class="icon-prev"></span></a> <a class="right carousel-control" data-slide="next" href="#"><span class="icon-next"></span></a> </div> 

Answer 1

Carousel link anchor labels must have href pointing to the carousel identifier. See Bootstrap Docs.

 <a class="left carousel-control" data-slide="prev" href="#gallery-carousel"><span class="icon-prev"></span></a> <a class="right carousel-control" data-slide="next" href="#gallery-carousel"><span class="icon-next"></span></a> 

Answer 2

I had a similar problem with indicators (not working). For indicators, you can add this to your JS ... This will manually configure the same function for indicators:

 $('.carousel-indicators li').click(function(e){ e.stopPropagation(); var goTo = $(this).data('slide-to'); $('.carousel-inner .item').each(function(index){ if($(this).data('id') == goTo){ goTo = index; return false; } }); $('#gallery-carousel').carousel(goTo); }); 

Answer 3

 $('.carousel-control').click(function(e){ e.stopPropagation(); var goTo = $(this).data('slide'); if(goTo=="prev") { $('#carousel-id').carousel('prev'); } else { $('#carousel-id').carousel('next'); } }); 

Answer 4

The dangers of copy-paste.

After spending several hours getting the controls to work, I found that my code had another carousel in the navigation bar with the same identifier #myCarousel

Just in case, someone is faced with the same problem.

Answer 5

Replace each href attribute with the data target in your right and left carousel elements.

Answer 6

I had the same problem as with a carousel not bootable. I switched from loading a miniature version of bootstrap to full, and then it worked. I think there is something not quite right in the mini.