jquery - Swiper Pagination Bullets - 可用于键盘

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

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

分页子弹的点击功能

有什么建议么？

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()-Method 来解决我的问题