как изменить динамический атрибут на слайдере - PullRequest
Новая
       8

как изменить динамический атрибут на слайдере

0 голосов
/ 04 сентября 2018

У меня динамический слайдер. И пытается добавить атрибут tabindex="-1" к потомку, когда его родительский элемент li имеет атрибут aria-hidden="true".

Вот Пример скрипки:

Или посмотрите ниже фрагмент: 

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

Как изменить код как динамический атрибут?

Пожалуйста, помогите

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

Как сообщил Луис, вам следует использовать функцию обратного вызова onSlideAfter:

но небольшое дополнение для удаления tabindex вы должны удалить из всех дочерних элементов li, которые добавляют его в li с помощью aria-hidden=true

добавив $('.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>
0 голосов
/ 04 сентября 2018

Вы должны использовать обратный вызов BxSlider onSlideAfter.

Выполняется сразу после каждого перехода слайда. Аргумент функции - это текущий элемент слайда (после завершения перехода).

См. документацию . 

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

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

Ваш Fiddle Обновлено .

...