Ana divandan bootstrap carousel göstergeleri otomatik olarak değiştirilmiyor

Question

En son Bootstrap'im var ve sayfamda bir ana karuseli var.

Benim atlıkarınca:

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

Sonra başka benim göstergeler sayfasında vardır:

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

atlıkarınca resimlerini anahtarları gibi göstergeler değişmez. Ayrıca tıklandığında karuseli değiştirmelerini sağlamak için bir geçici çözüm kullanmam gerekiyordu.

O özetliyor:

• Benim atlıkarınca çalışıyor.
• Atlıkarınca göstergelerim karusel divunun dışında.
• Göstergeler, döner karterin yaptığı zaman otomatik olarak değişmez.
• Göstergeleri tıklatırken bunları düzeltmek için jQuery geçici çözümü kullanmam gerekiyordu.

Answer 1

DEMO

Iyi bootstrap carousel ait slide.bs.carousel seçeneği kullanmak ve aşağıda Geçerli slayt bağlı, ilgili göstergeleri active yapabilirsiniz:

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 

}); 

---

GÜNCELLEME

Yukarıdaki yanıt, yalnızca carousel'un dışına yerleştirildiklerinde indicators active'un nasıl yapıldığını gösterir. Döngüsel göstergeler için tıklama olayını ele almadığım için click çalışırken çalışmıyor. Güncellemenin aynısı aşağıda düzeltiliyor. Bir önceki slayta taşırken

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

Guruprasads kodunun doğru sinyal lambasını etmez. İşte benim daha genel çözümüm.

sizin döner düzenin id için ol-elemana veri hedef niteliği ayarlayın:

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

ve şunları js Aşağıdaki kod:

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