带有aria标签的猫头鹰轮播2.2点 [英] owl carousel 2.2 dots with aria-label

问题描述

我想用"aria-label"来增强猫头鹰旋转木马中的点，其中包括显示的当前图像.最终代码应如下所示:

I would like to enhance the dots in owl carousel with a 'aria-label' which includes the current image displayed. The final code should look like this:

<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方法实现这一点

I'm trying to reach this with a attr method

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

但是我根本无法获得aria标签内的当前图像编号.猫头鹰轮播有计数器或currentIndex吗?如何添加?感谢您的帮助

but I'm simply not able to achieve the current image number inside the aria label. Is there a counter or currentIndex there for Owl carousel? How can I add it? Thanks for the help

推荐答案

您可以像这样循环遍历每个点并为其赋予索引:

You can loop through each dot and give it the index of the loop like so:

//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);
  });
});

这篇关于带有aria标签的猫头鹰轮播2.2点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！