javascript - 旋转木马幻灯片和导航栏更改之间的 Bootstrap 延迟

Question

我有一个像这样的 Bootstrap 轮播:

这是代码:

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

这是javascripts代码

$(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);
  });
});

问题是大约2分钟后，carousel的滑动速度比nav pilles快，有延迟。 我希望下一张幻灯片始终与 nav pills 更改同时出现。

我该如何解决？

Answer 1

试试这个 -

     $(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);
     });
   });