javascript - 带 aria-label 的 Owl Carousel 2.2 点

Question

我想使用“aria-label”来增强 Owl Carousel 中的点，其中包括当前显示的图像。最终代码应如下所示:

<div class="owl-dot" aria-label="1><span></span></div>
<div class="owl-dot" aria-label="2"><span></span></div>
<div class="owl-dot" aria-label="3"><span></span></div>

我正在尝试使用 attr 方法来实现此目的

    $('.owl-carousel .owl-dot').attr('aria-label', '+currentIndex.lenght+');

但我根本无法获得 aria 标签内的当前图像编号。 Owl Carousel 有计数器或 currentIndex 吗？我怎样才能添加它？感谢您的帮助

Answer 1

您可以循环遍历每个点并为其指定循环索引，如下所示:

//Go through each carousel on the page
$('.owl-carousel').each(function() {
    //Find each set of dots in this carousel
  $(this).find('.owl-dot').each(function(index) {
    //Add one to index so it starts from 1
    $(this).attr('aria-label', index + 1);
  });
});