更新自动幻灯片 bootstrap 轮播的活动元素

update active element for auto slide bootstrap carousels

我有 3 个 bootstrap 个轮播(只有一个可见,具体取决于您单击此处的内容):

他们的工作原理都是一样的。如果我单击另一张幻灯片,它会被激活(添加 class 选中)。它看起来像这样:

但是当它自动滑动到另一张幻灯片时,这张幻灯片没有显示为已激活(未添加 class 选择)并且我不知道为什么它不起作用。

问题与此页面有关: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');
});

在自动滑动时,它不会添加所选的 class,而是在单击时添加。我的代码有什么问题?

您正在使用 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');
});

自动轮播功能的问题似乎是您的 "id" 不正确,因为抓取它的选择器没有针对正确的元素。

您需要定位当前 "selected" 项。现在,因为您的 "id" 未在此处检索:
var id = $('.item.active').data('slide-number');

理想情况下,您的 "selected" class 应该在您的 <li> 中,这样您就可以轻松获取索引,但如果您想以正确的方式获取正确的 ID现在你可以像这样获取索引:

var id = $("#carouselMarketing1 a.selected").parent().index();

var id = $("#carouselMarketing1 a.selected").parent().attr("data-slide-to")

编辑:

再次查看后,我发现您的问题是与尝试检索具有多个轮播的 ID 有关,感谢您对此发表评论。

这对我有用:

id = $(a.currentTarget).find('.item.active').index()

基本上,您只是获取当前所选轮播下活动项目的 ID。