Question

I am working with Twitter Bootstrap Carousel and though I am not very familiar with .js, somehow I got things working fine.

The only problem is that the next/prev button is working in a strange way.

Here’s my temp site:
http://tokyo-flaneur.com/dl/donner/contents/menu.html

Although I have 10 images, I can not get to the No.10 by clicking the next button. After the third image, when I click on the next button, the image goes back to No.2.

Also, whichever image I am looking, when I click the prev button, it goes all the way back to No.1.

Could anyone help me or direct me to the right direction? Any help would be appreciated.

Answer 1

You handle slider’s next/prev buttons with your own handler, so it slide to 2nd element 1st, than tries to make next()

replace:

$("#myCarousel a").click(function(e){ 
    var index = $(this).index(); 
    //when hitting NEXT button index always 2, for PREV - 0
    slider.carousel(index); 
    e.preventDefault(); 
}); 

with

$("#myCarousel .slider-pager a").click(function(e){ 
    var index = $(this).index(); 
    slider.carousel(index); 
    e.preventDefault(); 
}); 

in your onpage script