Bootstrap carousel pagination/slide numbering issue

Question

Я, как и многие другие, хочу кликабельную и удобную разбивку на страницы, чтобы работать с карусели Bootstrap, поэтому мне не нужно запускать дополнительные плагины jquery (например, innerfade) поверх верхней части бутстрапа.

У меня был шанс использовать этот вопрос (и ответить) Bootstrap Carousel Number active icon, но до сих пор нет кубиков, я не вижу, что я делаю неправильно здесь.

Вот мой возиться http://jsfiddle.net/adriatiq/V4SBt/ (странно, разбиение на страницы работает на скрипке, а не на месте). Как вы можете видеть, нумерация не проскальзывает, так как слайды прогрессируют.

Прошу прощения за свои унылые навыки js.

Answer 1

Я изучил ваш код. Я добавил класс, основанный на нажатие на 1,2,3 числе ... Но я не смог сделать то же самое для следующих ссылок предыдущих ...

http://jsfiddle.net/V4SBt/1/

Я написал код, но его комментарий ... В этом коде я получаю странную ошибку, говоря об Undefined click event по этой ссылке, когда я пытался прослушать эти события click.

Answer 2

Это один работает для меня :) http://jsfiddle.net/4WY6S/6/

<script type="text/javascript"> 
var currentPage =0; 
$('#myCarousel').carousel({ 
     interval: 7000 
    }) 
$('#carousel-nav a').click(function(q){ 
    q.preventDefault(); 
    clickedPage = $(this).attr('data-to')-1; 
    currentPage = clickedPage-1; 
    $('#myCarousel').carousel(clickedPage); 
    }); 
var pages = $("#carousel-nav a"); 
var pagesCount = pages.length; 
$('#myCarousel').on('slide', function(evt) { 
    $(pages).removeClass("active"); 
    currentPage++; 
    currentPage=(currentPage%pagesCount); 
    $(pages[currentPage]).addClass("active"); 
    }); 
</script> 

Вот код для "Назад" и кнопки "Next":

<a href="#" onclick="if(currentPage>0){currentPage=((currentPage-2)%3);$('#myCarousel').carousel(currentPage+1);}">PREVIOUS</a> | <a href="#" onclick="if(currentPage<2){$('#myCarousel').carousel(currentPage+1);}">NEXT</a>