CODEWITHSUNDEEP
jquerycarouseltwitter-bootstrap-3
Primoz Rome
Primoz Rome

Reputation: 11031

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 http://bevog.si.bitcloud.nine.ch/ (#gallery).

UPDATE:

Carousel init code

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

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

Upvotes: 8

Views: 29476

Answers (6)

Dejazmach
Dejazmach

Reputation: 800

Replace each href attribute with data-target in your carousel right and left controls.

Upvotes: 3

bhaskarc
bhaskarc

Reputation: 9521

Perils of copy-paste.

After having wasted several hours on getting the controls to work, I discovered that my code had yet another carousel in the navbar with the same ID #myCarousel

Just in case some one faces the same issue.

Upvotes: 3

S&#243;lon
S&#243;lon

Reputation: 41

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

Upvotes: 4

Chirag Mishra
Chirag Mishra

Reputation: 93

I have been having a similar issue with the indicators(not working). For indicators, you can add this to your JS...This will manually set the same function for the 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); 
    });

Upvotes: 8

Dawn
Dawn

Reputation: 11

I was having the same issue as well with the carousel not loading. I switched from loading the minified version of bootstrap to the full one and then it worked. Me thinks there's something not quite right in the mini.

Upvotes: 1

DigTheDoug
DigTheDoug

Reputation: 1440

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>

Upvotes: 20

Related Questions