0

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

現在、キーボードでもページネーションの箇条書きにアクセスできるようにしようとしていますが、開始方法がわかりません。ページネーションの箇条書きに既に実装されているクリック機能を調べようとしましたが、縮小されていて役に立ちません。

ページネーション箇条書きのオンクリック機能

助言がありますか？

4

1 に答える 1

0

自力で解決しました。

次のコードを 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 を使用して問題を解決できました

于 2020-03-03T10:18:03.273 に答える