我有 3 个 Bootstrap 轮播(只有一个可见,具体取决于您在此处单击的内容):
它们的工作原理都是一样的。如果我单击另一张幻灯片,则会激活该幻灯片(添加选定的类)。它看起来像这样:
但是当它自动滑动到另一张幻灯片时,这张幻灯片没有显示为已激活(没有添加所选的类),我不知道为什么它不起作用。
问题与此页面有关: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');
});
在自动幻灯片上,它不会添加所选的类,而是在单击时添加。我的代码有什么问题吗?
最佳答案
自动轮播功能的问题似乎是您的“id”不正确,因为抓取它的选择器没有定位正确的元素。
您需要定位当前“选定”的项目。现在,因为您的“id”未在此处检索:
var id = $('.item.active').data('slide-number');
理想情况下,您的“选定”类(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。
关于javascript - 更新自动滑动引导轮播的事件元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49793015/