how to change dynamical attribute on slider

Question

I have a dynamical slider. And trying to add tabindex="-1" attribute to child when it's parent li element has aria-hidden="true" attribute.

Here is Fiddle example :

Or see below snippet :

$('.bxslider').bxSlider({
  minSlides: 3,
  maxSlides: 3,
  moveSlides: 1,
  slideWidth: 150,
  slideMargin: 0
});

$('li[aria-hidden=true]').children().attr('tabindex', '-1');

body {
  margin: 50px 0 0 30px;
}

.my-slider {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css" rel="stylesheet" />

<ul class="my-slider bxslider">
  <li><a href="#">aaa</a> </li>
  <li><a href="#">bbb</a> </li>
  <li><a href="#">ccc</a> </li>
  <li><a href="#">dd</a> </li>
  <li><a href="#">eee</a> </li>
</ul>

How do I change the code as dynamical attribute ?

Please help

Answer 1

As Louys reported you should use onSlideAfter calback function :

but some small addition in order to remove tabindex you should remove from all li's children that add it to li with aria-hidden=true

by adding $('.bxslider li').children().removeAttr('tabindex');

See below Snippet :

$('.bxslider').bxSlider({
  minSlides: 3,
  maxSlides: 3,
  moveSlides: 1,
  slideWidth: 150,
  slideMargin: 0,
  onSlideAfter : function(elt,oldIndex,neIndex) {
   $('.bxslider li').children().removeAttr('tabindex');
   $('li[aria-hidden=true]').children().attr('tabindex', '-1');
  }
});

$('li[aria-hidden=true]').children().attr('tabindex', '-1');

body {
  margin: 50px 0 0 30px;
}

.my-slider {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css" rel="stylesheet" />

<ul class="my-slider bxslider">
  <li><a href="#">aaa</a> </li>
  <li><a href="#">bbb</a> </li>
  <li><a href="#">ccc</a> </li>
  <li><a href="#">dd</a> </li>
  <li><a href="#">eee</a> </li>
</ul>