javascript - 更新自动滑动引导旋转木马的事件元素

我有3个自举轮播（只有一个可见，具体取决于您在此处单击的内容）：


他们都是一样的。如果我单击另一张幻灯片，则会激活它（添加选定的类）。看起来像这样：


但是，当它自动滑动到另一张幻灯片时，此幻灯片不会显示为已激活（未添加所选的类），而且我不知道为什么它不起作用。


有关此页面的问题：https://bm-translations.de/km.php#video

我的代码：

// handles the carousel buttons
$('[id^=carousel-selector-]').click( function(){
  var id_selector = $(this).attr("id");
  var id = id_selector.substr(id_selector.length -1);
  id = parseInt(id);
  $('.carousel').carousel(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $(this).addClass('selected');
});

// when the carousel slides, auto update
$('.carousel').on('slide.bs.carousel', function (e) {
  var id = $('.item.active').data('slide-number');
  id = parseInt(id)+1;
  $('[id^=carousel-selector-]').removeClass('selected');
  $('[id=carousel-selector-'+id+']').addClass('selected');
});

在自动滑动时，它不会添加选定的类，而是在单击时执行。我的代码有什么问题？

最佳答案

您正在使用on绑定slide.bs.carousel，但这不是jQuery事件。您必须改为使用bind。

$('.carousel').bind('slide.bs.carousel', function(e){
    var $this = $(this), index = $this.find('.item.active').index();
    var $sliderButtons = $this.find('[data-slide-to] a');
    $sliderButtons.eq(index).removeClass('selected');
    $sliderButtons.eq( index+1 < $sliderButtons.length ? index+1 : 0).addClass('selected');
});

关于javascript - 更新自动滑动引导旋转木马的事件元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49793015/