Los indicadores de carrusel Bootstrap fuera del div principal no cambian automáticamente

Intenta interpretar el código bien antes de usarlo a tu trabajo si ttienes algo que aportar puedes dejarlo en la sección de comentarios.

Solución:

MANIFESTACIÓN

Bueno, puedes hacer uso de slide.bs.carousel opción de bootstrap carousel y hacer los respectivos indicadores active dependiendo de la diapositiva actual de la siguiente manera:

var $carousel = $('#myCarousel'); //get a reference
$carousel.carousel(); 
$carousel.bind('slide.bs.carousel', function (e)  //attach its event
    var current=$(e.target).find('.item.active'); //get the current active slide
    $('.carousel-indicators li').removeClass('active') //remove active class from all the li of carousel indicator

    var indx=$(current).index(); //get its index
    if((indx+2)>$('.carousel-indicators li').length)
        indx=-1 //if index exceeds total length of indicators present set it to -1
    $('.carousel-indicators li:nth-child('+(indx+2)+')').addClass('active');//set the respective indicator active

);

---

ACTUALIZAR

La respuesta dada arriba solo muestra cómo hacer indicators active cuando se colocan fuera del carousel. no funciona mientras click ya que no he manejado el evento de clic para los indicadores de carrusel. La actualización a continuación corrige lo mismo.

DEMOSTRACIÓN ACTUALIZADA

var $carousel = $('#myCarousel');
$carousel.carousel();
var handled=false;//global variable

$carousel.bind('slide.bs.carousel', function (e) 
    var current=$(e.target).find('.item.active');
    var indx=$(current).index();
    if((indx+2)>$('.carousel-indicators li').length)
        indx=-1
     if(!handled)
     
        $('.carousel-indicators li').removeClass('active')
        $('.carousel-indicators li:nth-child('+(indx+2)+')').addClass('active');
     
     else
     
        handled=!handled;//if handled=true make it back to false to work normally.
     
);

$(".carousel-indicators li").on('click',function()
   //Click event for indicators
   $(this).addClass('active').siblings().removeClass('active');
   //remove siblings active class and add it to current clicked item
   handled=true; //set global variable to true to identify whether indicator changing was handled or not.
);

Si eres capaz, tienes el poder dejar un artículo acerca de qué te ha impresionado de esta crónica.

---

---

Utiliza Nuestro Buscador