如何更改滑块上的动态属性

Question

我有一个动态滑块。并尝试在父 li 元素具有 aria-hidden="true" 属性时向子元素添加 tabindex="-1" 属性。

或查看以下代码段：

$('.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>

如何将代码更改为动态属性？

请帮忙

Answer 1

您必须使用 BxSlider onSlideAfter 回调。

Executes immediately after each slide transition. Function argument is the current slide element (when transition completes).

见documentation。

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

  onSlideAfter: function(){
    $('li[aria-hidden=true]').children().attr('tabindex', '-1');
  }
});

你的Fiddle Updated.

Answer 2

正如 Louys 所报告的，您应该使用 onSlideAfter 回调函数：

但是为了删除 tabindex，您应该从所有使用 aria-hidden=true

添加到 li 的子项中删除 tabindex

通过添加 $('.bxslider li').children().removeAttr('tabindex');

请参阅下面的代码段：

$('.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>

如何更改滑块上的动态属性

how to change dynamical attribute on slider

html

javascript

jquery

bxslider