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

Question

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

我们遇到了可访问性问题，所以我已将库升级到 4.2.3，它有更好的支持

这是 bxslider 的示例，您可以通过 Tab 键浏览控件，一切正常

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

当其中一张幻灯片中有一个可聚焦的元素时，当您在内容中切换时，滑块对齐会扭曲并且永远不会真正恢复，就会出现问题

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

可能的解决方案...

tabindex=-1 在 "a" 元素上，但问题是不能切换到 link
聆听幻灯片切换并以某种方式重新对齐滑块

我在他们的问题列表中找不到与此相关的错误，所以有人对如何处理这个问题有建议吗？

最好查看 fiddle 但这里是部分来源

<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();
});

这里 fiddle: http://jsfiddle.net/qax7w8vt/3/

Answer 2

试试下面的代码：

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

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

bxslider accessibility tabbing distorts slide alignment

html

javascript

jquery

bxslider