Bootstrap carousel indicators from the main div do not switch automatically

Question

I have the latest Bootstrap, and I have a carousel somewhere on my page with indicators outside the main carousel div.

My carousel:

<div class="background-carousel"> <div class="carousel slide carousel-fade" id="carousel-home" data-ride="carousel1"> <div class="carousel-inner" role="listbox" id="carousel-inner-home"> <div data-slide-no="0" class="item carousel-item active" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/img/home-bg-1.png)"> </div> <div data-slide-no="1" class="item carousel-item" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/img/grass.jpg)"> </div> <div data-slide-no="2" class="item carousel-item" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/img/grass2.jpg)"> </div> <div data-slide-no="3" class="item carousel-item" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/img/grass3.jpg)"> </div> </div> </div> <!-- carousel --> </div> <!-- /.background-carousel --> 

Then I have my indicators, where on the page:

 <div class="home-carousel-indicators"> <ol class="carousel-indicators"> <li data-target="#carousel-home" data-slide-to="0" class="carousel-switcher active"></li> <li data-target="#carousel-home" data-slide-to="1" class="carousel-switcher"></li> <li data-target="#carousel-home" data-slide-to="2" class="carousel-switcher"></li> <li data-target="#carousel-home" data-slide-to="3" class="carousel-switcher"></li> </ol> </div> <!-- /.home-caraousel-indicators --> 

When the carousel switches images, the indicators do not change. I also had to use a workaround to get them to change the carousel when pressed.

Summarizing:

• My carousel works great.
• My carousel indicators are outside the carousel.
• The indicators do not switch automatically when the carousel is running.
• I had to use a jQuery workaround to capture indicators when clicking on them.

Answer 1

Demo

Well, you can use the slide.bs.carousel bootstrap carousel and make the corresponding active indicators depending on the current slide, as shown 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 above just shows how to make indicators active when they are placed outside the carousel . It does not work while click , since I did not handle the click event for carousel indicators. Below updates fixed 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. }); 

Answer 2

The Guruprasads code does not activate the correct indicator when moving to the previous slide. Here is my more general solution.

Set the target data attribute for your ol element to your carousel ID:

 <ol class="carousel-indicators" data-target="#myCarousel"> 

and include the following js code:

 function initCarouselIndicators() { $(".carousel-indicators[data-target]").each(function (i, indicators) { var targetId = indicators.dataset.target; if (targetId != "") { var $carousel = $(targetId); $carousel.bind('slide.bs.carousel', function (e) { var $targetSlide = $(e.relatedTarget); var index = $targetSlide.index(); $('.carousel-indicators[data-target="' + targetId + '"] li').removeClass('active') $('.carousel-indicators[data-target="' + targetId + '"] li:nth-child(' + (index + 1) + ')').addClass('active'); }); } }); } $(document).ready(function () { initCarouselIndicators(); } 

Demo