[SOLVED] owl carousel 2.2 dots with aria-label

owl carousel 2.2 dots with 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>

I'm trying to reach this with a attr method

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

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

Solution

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