Daniel Dewhurst Daniel Dewhurst - 1 month ago 13
CSS Question

Bootstrap carousel indicators out of the main div not switching automatically

I have the latest Bootstrap, and have a carousel somewhere on my page, with the indicators outside of 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 -->


I then have my indicators else 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 -->


As the carousel switches pictures, the indicators don't change. I also had to use a workaround to get them to change the carousel when clicked.

Summing it up:


  • My carousel works fine.

  • My carousel indicators are outside of the carousel div.

  • The indicators do not automatically switch when the carousel does.

  • I had to use a jQuery workaround to fix the indicators when clicking them.


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