bxslider可访问性选项卡扭曲幻灯片对齐

Question

我正在使用bxslider并创建了2个显示我问题的jsfiddles。

我们遇到了无障碍问题，因此我已将库升级到4.2.3，这有更好的支持

这是bxslider的一个例子，您可以通过控件进行制表，一切都很好

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

问题出现在其中一个幻灯片中有一个可聚焦的元素，当你浏览内容时，滑块对齐失真并且永远无法恢复

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

可能的解决方案......

“li”元素上的
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',
        });
    });

Answer 1

我不知道，也许这是一个错误？

但是，我可以使用jquery focus listener

进行预防

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

这里是小提琴：http://jsfiddle.net/qax7w8vt/3/

Answer 2

尝试以下代码：

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