2015-05-21 2 views
1

Я использую bxslider и создал 2 jsfiddles, которые показывают мою проблему.bxslider accessability tabbing искажает выравнивание слайдов

Мы имеем проблемы доступности, поэтому я модернизировал библиотеку 4.2.3, которая имеет лучшую поддержку

Это пример bxslider и вы можете вкладку через элементы управления и все хорошо

http://jsfiddle.net/qax7w8vt/2/embedded/result/

проблема возникает, когда есть фокусируемый элемент в одном из слайдов и при закладке через содержание выравнивание ползуна искажается и никогда не восстанавливает

http://jsfiddle.net/qax7w8vt/1/embedded/result/

enter image description here

Возможные решения ...

  1. TabIndex = -1 на "а" элемента, но проблема в том, что никогда не может не вкладка по ссылке
  2. Прекратите слушать к слайд-переход и каким-то образом выровнять ползунок

Я не мог найти ошибку, указанную в списке выпусков, поэтому у кого-нибудь есть предложение о том, как сдать это?

Лучше проверить скрипку, но вот часть источника

<div style="width: 730px; position: relative; margin: 0 auto;"> 
    <ul class="bxslider"> 
     <li> 
      <img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" /> 
     </li> 
     <li><a href="http://google.com" style="position: absolute;left:200px; bottom:40px;">Some link here</a> 
      <img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" /> 
     </li> 
     <li> 
      <img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /> 
     </li> 
    </ul> 
</div> 

$(document).ready(function() { 
     $('.bxslider').bxSlider({ 
      slideWidth: 730, 
      mode: 'horizontal', 
     }); 
    }); 
+0

что вы имеете в виду под «выравнивание ползуна искажается»? скрипка выглядит нормально .. – aswzen

+0

Попробуйте нажать вкладку несколько раз, и вы увидите, что слайдер фокусируется на элементе «a», а слайды больше не выровнены по отношению к ползунку. – Carlton

+0

для tabindex = «- 1» будет работать только на html 5 и попробуйте скрывать элемент и показывать его только там, где он достигает или слайды в –

ответ

1

Я не знаю, может быть, его ошибка?

, но я могу сделать предупреждение с помощью jquery focus listener

$("#prevent").focus(function() { 
    slider.reloadSlider(); 
}); 

здесь скрипку: http://jsfiddle.net/qax7w8vt/3/

+1

Спасибо за предложение, это привело меня к этому решению - https://jsfiddle.net/c2ud095x/2/embedded/result/ - я отключил фокусируемыми элементами в клонированных слайдах, а затем проверили, был ли сфокусированный элемент таким же, как тот, который слайдер думал, что он включен. Если бы не то же самое, я бы вручную переместил слайдер :) – Carlton