Twitter Bootstrap3: aktuelle Karussell Indexnummer per Klick erhalten und automatischen

Question

In bootstrap3 letzten Version für 4 Einzelteile in Karussell:

<!-- Carousel nav --> 
      <a class="carousel-control left" href="#carousel" data-slide="prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></a> 
      <a class="carousel-control right" href="#carousel" data-slide="next"><i class="fa fa-chevron-right" aria-hidden="true"></i></a> 

in right carouse control I aktuelle Nummer Index und etwas tun mit ihm.

$(".right").click(function(){ 
    idx = $('.carousel-inner div.active').index()+1; 
    if(idx == 4) idx = 0; 
    animateBorder(idx); 
}); 

auch für links:

$(".left").click(function(){ 
    idx = $('.carousel-inner div.active').index()-1; 
    if(idx == -1) idx = 3; 
    animateBorder(idx); 
}); 

es gut funktioniert.

Also ich möchte verwenden animateBorder() Funktion für automatisches Wechsel Folie.

Ich benutze diese:

$('#carousel').on('slide.bs.carousel', function() { 
    idx = $('.carousel-inner div.active').index() + 1; 
    if(idx == 4) idx = 0; 
    animateBorder(idx); 

}); 

es gut funktioniert.

aber wenn ich auf den linken Knopf klicke, laufen beide animateBorder() im zweiten und dritten Code.

Wie kann ich es kontrollieren?

Answer 1

Sie müssen die animateborder-Funktionen in den rechten und linken Klickereignissen löschen. Überprüfen Sie es in der Konsole in Geige. Es gibt kein console.log ("animateborderf") in rechten oder linken Klickereignissen, aber es wird ausgelöst, wenn Sie darauf klicken. https://jsfiddle.net/h73yp2o3/

$(".right").click(function(){ 
    idx = $('.carousel-inner div.active').index()+1; 
    if(idx == 4) idx = 0; 
}); 
$(".left").click(function(){ 
    idx = $('.carousel-inner div.active').index()+1; 
    if(idx == 4) idx = 0; 
}); 
$('#myCarousel').on('slide.bs.carousel', function() { 
    idx = $('.carousel-inner div.active').index() + 1; 
    if(idx == 4) idx = 0; 
    console.log("animateborderf"); 

}); 

Die Situation ist, wenn der Benutzer nach rechts oder links Schaltfläche klickt, Karussell Dias und wenn Karussell Dias slide.bs.carousel Ereignis feuern wird. Die animimeborder-Funktion ruft also zweimal in Ihrem Code auf.

Bearbeiten: https://jsfiddle.net/h73yp2o3/2/ Das ist besser, denke ich.