jquery - Twitter Bootsrap Carousel .carousel(number) not working

Question

I'm having a problem with the .carousel(number) method on Twitter Bootstrap Carousel plugin. Somehow I can't get it working. The carousel itself is up and running, so does the .carousel('next') method.

$('#carousel-nav a').click(function(q){
 q.preventDefault();
 targetSlide = $(this).attr('data-to');
 //this one doesn't work $('#my-carousel').carousel(targetSlide); 
 $('#my-carousel').carousel('next');
});

Here is the markup

<ul id="carousel-nav" class="nav nav-tabs nav-stacked">
    <li><a href="#my-carousel" data-to="0" >Slide 1</a></li>
    <li><a href="#my-carousel" data-to="1" >Slide 2</a></li>
    <li><a href="#my-carousel" data-to="2" >Slide 3</a></li>
</ul>

Any clue? Thank you in advance.

Answer 1

The numbers are 0 based like an array. Try this:

    var targetSlide = $(this).attr('data-to') -1;

I just subtracted 1 from your targetSlide variable. It worked for me.