Bootstrap Carousel Indicators Out Of The Main Div Not Switching Automatically

Answer :

DEMO

Well you can make use of slide.bs.carousel option of bootstrap carousel and make the respective indicators active depending on the current slide as below:

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  }); 

---

UPDATE

The answer given above just shows how to make indicators active when they are placed outside the carousel. It is not working while click since I haven't handled click event for carousel indicators.. Below update fixes the same.

UPDATED DEMO

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. });