空项目与猫头鹰旋转木马，如果选项卡与键盘链接内的项目

Question

我使用目前稳定的猫头鹰旋转木马(1.3.2)的单一项目旋转木马。我已经启用了前一个和下一个按钮。

旋转木马中的几个项目都有链接，例如<a href="page.html" class="button">Find out more</a>.

当使用键盘(在Chrome中)通过网页选项卡时，旋转木马内的链接将获得焦点，这是很棒的。但是，如果用户使用带有鼠标的前一个和下一个按钮移动到下一个旋转木马项目，则该按钮是空的。所有其他旋转木马项目后，其中一个包含链接，它也是空的。一点内容都没有。

当使用Chrome的DevTools检查旋转木马时，它看起来就像旋转木马并没有移动，尽管项目中的链接是集中的和可见的。它似乎变得非常混乱。

曾经有人经历过猫头鹰(或其他旋转木马)的这种事情吗？如果项目中的链接获得焦点，有什么可以让旋转木马正确地继续吗？

Answer 1

将tabindex="0“添加到旋转木马的每个项目中，大大提高了键盘导航能力。另外，我没有使用Owl生成的默认的上一个和下一个<div>按钮，而是使用<a>创建了自己的按钮。有关如何做到这一点的信息如下：http://owlgraphic.com/owlcarousel/demos/custom.html

这些更新帮助猫头鹰旋转木马更容易使用键盘导航。所有幻灯片显示后，每个键盘选项卡按下，并在幻灯片中的任何链接也获得焦点。另外，倒装标签的效果很好--当用户向后选项卡时，幻灯片会以相反的顺序显示。

剩下的唯一问题是旋转木马没有正确地“移动”。即分页不更新。因此，如果用户在选项卡到滑块中间的某个位置后单击“next”或“前一段”按钮，则会显示空白幻灯片(正如我在最初的查询中提到的)。然而，我认为，随着键盘导航的改进，这不是一个问题，因为用户现在能够查看所有的内容--他们不会因为使用键盘而错过任何东西。

HTML:

<div class="slider-wrapper">

    <div class="owl-nav">
        <a href="#" class="prev">Previous</a>
        <a href="#" class="next">Next</a>
    </div>

    <div class="slider">

        <div tabindex="0">
            <h1>Content</h1>
            <p>Content</p>
        </div>

        <div tabindex="0">
            <h1>Content</h1>
            <p><a href="page.html" class="button">Find out more</a></p>
        </div>

        <div tabindex="0">
            <h1>Content</h1>
        </div>

    </div>

</div>

jQuery:

var owl = $(".slider");

owl.owlCarousel({
    singleItem: true,
    theme: "slider",
    mouseDrag: false,
    slideSpeed : 750
});   

$(".owl-nav .next").click(function(e){
    e.preventDefault();
    owl.trigger('owl.next');
});

$(".owl-nav .prev").click(function(e){
    e.preventDefault();
    owl.trigger('owl.prev');
});