Primoz Rome Primoz Rome - 1 year ago 132
jQuery Question

Bootstrap 3 carousel controls and indicator links not working

I am scratching my head why Bootstrap 3 carousel controls (and indicator) links are not working on my page. It was a simple copy-paste from docs + a little of CSS customization. Code can be seen here (#gallery).


Carousel init code


Carousel markup

<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>

<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 class="item" id="bevog-image-2">
<img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title">
<div class="item" id="bevog-image-3">
<img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title">

<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>

Answer Source

The carousel links' anchor tags need to have an href that points to the id of the carousel. 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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download