Bootstrap Número carrusel icono activa

Question

he podido poner en práctica el carrusel Bootstrap completo con iconos para representar las diapositivas 1-3 en este ejemplo: http://jsfiddle.net/alexmoss/QzVq8/

noto que la clase "activa" se añade por defecto para deslizar 1 que luego cambia a medida que cambia la diapositiva activa. lo que quiero hacer es que esto suceda también para las balas. He activado el primero pero quiero que el segundo se active si la diapositiva está en la diapositiva 2, etc.

Answer 1

Básicamente resolvió el índice de la diapositiva que se muestra actualmente, luego usó ese índice para aplicar la clase 'activo' al botón de navegación respectivo.

$('#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'); 
}); 

Puede optimizar claramente el código para usar menos variables. Sin embargo, lo he expandido deliberadamente para que entiendas lo que está pasando.

Answer 2

Debe enlazar el evento 'deslizante' del carrusel. Más detalles están aquí ->How to attach "slide" & "slid" events to the Bootstrap toolkit's carousel?