Bootstrap-Verzögerung zwischen Karussell Rutsche und nav li Änderung

Question

Ich habe eine Bootstrap-Karussell wie folgt aus:

Dies ist die Codes:

<div id="catCrsou" class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="http://192.168.1.108/forushgah_datamanager//galleryPics/13073307011029.jpg" style="width: 100%;" onclick=""> 
    </div> 
    <div class="item"> 
     <img src="http://192.168.1.108/forushgah_datamanager//galleryPics/24555488815560.jpg" style="width: 100%;" onclick=""> 
    </div> 
    </div> 
    <!-- End Carousel Inner --> 
    <ul class="nav nav-pills nav-justified"> 
    <li class="bt active" data-target="#catCrsou" data-slide-to="0"> 
     <a href="#" title="عنوان مقاله" dir="rtl">عنوان مقاله</a></li> 
    <li class="bt" data-target="#catCrsou" data-slide-to="1"> 
     <a href="#" title="عنوان 2" dir="rtl">عنوان 2</a></li> 
    </ul> 
</div> 

und dies ist die Javascripts Codes

$(document).ready(function() { 
    $('#catCrsou').carousel({ 
    interval: 4000 
    }); 

    var clickEvent = false; 
    $('#catCrsou').on('click', '.nav a', function() { 
    clickEvent = true; 
    $('.nav li').removeClass('active'); 
    $(this).parent().addClass('active'); 
    }).on('slid.bs.carousel', function(e) { 
    if (!clickEvent) { 
     var count = $('.nav').children().length - 1; 
     var current = $('.nav li.active'); 
     current.removeClass('active').next().addClass('active'); 
     var id = parseInt(current.data('slide-to')); 
     if (count == id) { 
     $('.nav li').first().addClass('active'); 
     } 
    } 
    clickEvent = false; 
    }); 

    $("#catCrsou li").hover(function() { 
    var goto = Number($(this).attr('data-slide-to')); 
    $("#catCrsou").carousel(goto); 
    }); 
}); 

Das Problem ist, dass nach etwa 2 Minuten das Karussell sl its schneller als die nav Pillen und es gibt eine Verzögerung. Ich möchte die nächste Folie immer die gleiche Zeit mit nav Pillen wechseln.

Wie soll ich es beheben?

Answer 1

Try this -

 $(document).ready(function() { 
    $('#catCrsou').carousel({ 
     interval: 4000 
    }); 

    // var clickEvent = false; 
    // $('#catCrsou').on('click', '.nav a', function() { 
    // clickEvent = true; 
    // $('.nav li').removeClass('active'); 
    // $(this).parent().addClass('active'); 
    // }).on('slid.bs.carousel', function(e) { 
    // if (!clickEvent) { 
    //  var count = $('.nav').children().length - 1; 
    //  var current = $('.nav li.active'); 
    //  current.removeClass('active').next().addClass('active'); 
    //  var id = parseInt(current.data('slide-to')); 
    //  if (count == id) { 
    //  $('.nav li').first().addClass('active'); 
    //  } 
    // } 
    // clickEvent = false; 
    // }); 

    $('#catCrsou').bind('slide.bs.carousel', function (e) { 
     var currentIndex = $('div.active').index(); 
     $(".nav").find(".active").removeClass("active"); 
     if(currentIndex != 0) { 
      $('.nav li').first().addClass('active'); 
     } 
     else { 
      $('.nav li').last().addClass('active'); 
     } 

     console.log(currentIndex); 
    }); 

    $("#catCrsou li").hover(function() { 
     var goto = Number($(this).attr('data-slide-to')); 
     $("#catCrsou").carousel(goto); 
    }); 
    });