Снайперские маркеры для страниц - доступны для клавиатуры - PullRequest
Новая
       10

Снайперские маркеры для страниц - доступны для клавиатуры

0 голосов
/ 02 марта 2020

Я работаю со свайпером. js Слайдер.

Пока все работает отлично, и я уже реализовал специальные возможности для пользователей клавиатуры. Пользователи могут фокусировать значки со стрелками и изменять изображение ползунка, нажимая клавишу ввода. 

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

Теперь я пытаюсь сделать маркеры нумерации страниц доступными и для клавиатур, но не знаю, как начать. Я попытался найти уже реализованную функцию щелчка для маркеров нумерации страниц, но она уменьшена, и я не помогаю мне.

Функция щелчка для маркеров нумерации страниц

Есть предложения?

1 Ответ

0 голосов
/ 03 марта 2020

Решил сам.

Я добавил следующий код в мой 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);
                    }
                })
            })

Я должен был дать действительный идентификатор для каждой пулирования нумерации страниц, и после этого я смог использовать swiper js slideTo () - метод решения моей проблемы

...