Загрузочная Карусель номер активный значок

Мне удалось реализовать Карусель Bootstrap в комплекте с пиктограммами для представления слайдов 1-3 в этом примере: http://jsfiddle.net/alexmoss/QzVq8/

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

2 8
jquery twitter-bootstrap carousel

2 ответа:

В основном разработал индекс текущего слайда, а затем использовал этот индекс для применения класса "active" к соответствующей навигационной кнопке.

$('#myCarousel').bind('slid', function() {
    // Get currently selected item
    var item = $('#myCarousel .carousel-inner .item.active');

    // Deactivate all nav links
    $('#carousel-nav a').removeClass('active');

    // Index is 1-based, use this to activate the nav link based on slide
    var index = item.index() + 1;
    $('#carousel-nav a:nth-child(' + index + ')').addClass('active');
});

Вы можете четко оптимизировать код, чтобы использовать меньше переменных. Однако я намеренно расширил его, чтобы вы поняли, что происходит.

19

Вам нужно привязать событие' slid ' карусели. Более подробно здесь -- > Как прикрепить события" slide "и" slid " к карусели Bootstrap toolkit?

1