如果幻灯片具有使用 glide.js 的链接，Tab 键会中断滑块

Question

我有一个用 Glide.js 构建的滑块，有 6 张幻灯片，全部带有链接。它需要对我们的键盘用户来说是可选项的，但到目前为止它还不起作用。

如果用户用 Tab 键浏览页面，它将停在每张照片上，然后跳转到下面的第一个项目符号。

然后，如果用户单击第一个项目符号，它不会执行任何操作。当用户浏览项目符号时，图像会滑动并最终从屏幕上消失到空白处。用户可以做的最好的事情就是按回键返回到第一个项目符号，这只会将他们带回到图像 3。这是一个错误还是有什么可以做的？我觉得我已经尝试了一切。

Here's my code on code pen:
https://codepen.io/cristenrh/full/ExpwRNz

or an example on my website:
https://hewettcentral.com/cristen/carousel.html

我尝试对第一个项目符号使用不同的变量，例如“<<". I've tried using glide.update() once the user gets to the first bullet and I've even tried glide.mount(). Neither work. The closest I've come is to start using negative numbers in the bullets, but that really breaks it further.

     <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： 新的滑翔('.glide', { 类型：'滑块'， 自动播放：0， 键盘：真实， 每次观看：2， 窥视：100， 焦点：0 }).mount()

Answer 1

抱歉，我来晚了一点，但我遇到了同样的问题，并通过将非活动幻灯片的链接设置为“显示：无”来解决它。这样您就只能通过 Tab 键切换到可见幻灯片上的链接。

li:not(.glide__slide--active) a {
  display: none;
}