滑动分页项目符号 - 可通过键盘访问

Question

我正在使用 swiper.js 滑块。

到目前为止效果很好，我已经为键盘用户实现了辅助功能。用户可以通过按 enter 来聚焦箭头图标和更改滑块图像。

        // Swiper nav for keyboard
    $('.swiper-button-next').on('keydown', function (event){
        if(event.keyCode == '13'){
            var mySwiper = document.querySelector('.swiper-container').swiper;
            mySwiper.slideNext();
        }
    });
    $('.swiper-button-prev').on('keydown', function (event){
        if(event.keyCode == '13'){
            var mySwiper = document.querySelector('.swiper-container').swiper;
            mySwiper.slidePrev();
        }
    });

现在我正在尝试让键盘也可以访问分页项目符号，但我不知道如何开始。我试图查找已实现的分页项目符号点击功能，但它被缩小了，我对我没有帮助。

On Click function for Pagination Bullets

有什么建议吗？

Answer 1

自己解决了

我已将以下代码添加到我的 js 文件中：

            $('.swiper-pagination-bullet').each(function (index) {
                var bullet = $(this);
                bullet.attr('id', (index + 1));
            });

             $('.swiper-pagination').each(function (){
                $('.swiper-pagination-bullet').attr('tabindex', 0);
                $('.swiper-pagination-bullet').on('keydown', function (event){
                    if(event.keyCode == '13'){
                        console.log($(this))
                        var mySwiper = document.querySelector('.swiper-container').swiper;
                        var slideID = $(this).attr('id')
                        mySwiper.slideTo(slideID-1);
                    }
                })
            })

我必须为每个分页项目符号提供一个有效的 ID，然后我就可以使用 swiperjs slideTo()-方法来解决我的问题

滑动分页项目符号 - 可通过键盘访问

Swiper Pagination Bullets - Accessible for Keyboard

jquery

swiper

swiperjs