Swiper分页符号-键盘可访问

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（）-Method解决我的问题了