Gli indicatori di giostra del bootstrap fuori dal div principale non passano automaticamente

Question

Ho l'ultimo Bootstrap e ho un carosello da qualche parte sulla mia pagina, con gli indicatori al di fuori del div del carosello principale.

mia giostra:

<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 --> 

Ho poi i miei indicatori altrove nella pagina:

<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 --> 

Come la giostra commuta le immagini, gli indicatori non cambiano. Ho anche dovuto usare una soluzione alternativa per farli cambiare la giostra quando cliccato.

Riassumendo in su:

• mio carosello funziona bene.
• I miei indicatori di giostra sono al di fuori del div del carosello.
• Gli indicatori non si commutano automaticamente quando la giostra fa.
• Ho dovuto utilizzare una soluzione alternativa a jQuery per correggere gli indicatori quando facevano clic su di essi.

Answer 1

DEMO

Ebbene si può fare uso di slide.bs.carousel possibilità di bootstrap carousel e rendere i rispettivi indicatori active seconda diapositiva corrente come di seguito:

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

La risposta sopra riportata mostra come creare indicators active quando si trovano all'esterno dello carousel. Non funziona mentre click poiché non ho gestito l'evento click per gli indicatori di carosello. L'aggiornamento sottostante corregge lo stesso.

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

codice Guruprasads non attiva l'indicatore corretto quando si sposta alla diapositiva precedente. Ecco la mia soluzione più generica.

impostare l'attributo data-obiettivo sul tuo olo-elemento l'id del carosello:

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

e includere il seguente codice js:

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