Glide.js带链接滑块Tab导航异常及导航按钮失效问题求助

我用Glide.js构建了一个包含6个带链接幻灯片的滑块，需要支持键盘用户的Tab键导航，但当前功能异常，具体表现如下：

• 按Tab键遍历页面时，会在每张幻灯片的元素上停留，之后跳转到下方第一个导航按钮
• 点击第一个导航按钮无反应；按顺序点击后续按钮时，图片会滑动最终移出屏幕
• 返回点击第一个按钮时，仅能回到第3张幻灯片

我尝试过以下方法但均未解决问题：

• 修改第一个按钮的参数（如使用"<<"）
• 调用glide.update()和glide.mount()
• 使用负数参数

HTML代码 #

<div class="content">
    <div class="glide">
        <div class="glide__track" data-glide-el="track">
            <ul class="glide__slides">
                <li class="glide__slide">
                    <div style="background-image:url(https://images.pexels.com/photos/291528/pexels-photo-291528.jpeg?auto=compress&cs=tinysrgb&w=800)">
                    </div>
                    <p>
                        <h3>Cake 1</h3>
                        <a href="recipe.html">Cake Recipe</a>
                    </p>
                </li>
                <li class="glide__slide">
                    <div style="background-image:url(https://images.pexels.com/photos/1721934/pexels-photo-1721934.jpeg?auto=compress&cs=tinysrgb&w=800)">
                    </div>
                    <p>
                        <h3>Cake 2</h3>
                        <a href="recipe.html">Cake Recipe</a>
                    </p>
                </li>
                <li class="glide__slide">
                    <div style="background-image:url(https://images.pexels.com/photos/1702373/pexels-photo-1702373.jpeg?auto=compress&cs=tinysrgb&w=800)">
                    </div>
                    <p>
                        <h3>Cake 3</h3>
                        <a href="recipe.html">Cake Recipe</a>
                    </p>
                </li>
                <li class="glide__slide">
                    <div style="background-image:url(https://images.pexels.com/photos/369267/pexels-photo-369267.jpeg?auto=compress&cs=tinysrgb&w=800)">
                    </div>
                    <p>
                        <h3>Cake 4</h3>
                        <a href="recipe.html">Cake Recipe</a>
                    </p>
                </li>
                <li class="glide__slide">
                    <div style="background-image:url(https://images.pexels.com/photos/2531546/pexels-photo-2531546.jpeg?auto=compress&cs=tinysrgb&w=800)">
                    </div>
                    <p>
                        <h3>Cake 5</h3>
                        <a href="r4ecipe.html">Cake Recipe</a>
                    </p>
                </li>
                <li class="glide__slide">
                    <div style="background-image:url(https://images.pexels.com/photos/853004/pexels-photo-853004.jpeg?auto=compress&cs=tinysrgb&w=800)">
                    </div>
                    <p>
                        <h3>Cake 6</h3>
                        <a href="recipe.html">Cake Recipe</a>
                    </p>
                </li>
            </ul>
        </div>
        <div class="glide bullet_holder">
            <div class="glide__bullets" data-glide-el="controls[nav]">
                <button class="glide__bullet" data-glide-dir="=0"></button>
                <button class="glide__bullet" data-glide-dir="=1"></button>
                <button class="glide__bullet" data-glide-dir="=2"></button>
                <button class="glide__bullet" data-glide-dir="=3"></button>
                <button class="glide__bullet" data-glide-dir="=4"></button>
                <button class="glide__bullet" data-glide-dir="=5"></button>
            </div>
        </div>
    </div>
</div>
</main>

JS代码 #

new Glide('.glide', {
    type: 'slider',
    autoplay: 0,
    keyboard: true,
    perView: 2,
    peek: 100,
    focusAt: 0
}).mount()

内容的提问来源于stack exchange，提问作者Cristen Roberts Hewett