带有 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);
  });
});