Swiper JS - кнопка ввода ничего не делает на миниатюре для доступности - PullRequest
Новая
       34

Swiper JS - кнопка ввода ничего не делает на миниатюре для доступности

0 голосов
/ 09 апреля 2020

Проблема:

У нас возникают проблемы с доступностью на ползунке swiper при нажатии кнопки ввода на миниатюре, которая не переносит выбранное изображение в область основного изображения. Есть ли способ, если мы можем сделать это, нажав кнопку ввода, чтобы изменить основное изображение слайдера?

Сценарий:

У нас есть swiper JS - слайдер (https://swiperjs.com/) Установленный на нашем сайте слайдер отлично работает с миниатюрами. это означает, что нажатие на миниатюру показывает указанное изображение c в области основного изображения.

Но для удобства я пытаюсь добавить "tabindex = '0'" и "role = 'button' «поэтому я могу сфокусировать миниатюры, нажимая вкладки (и это работает), но нажатие кнопки (ввод) не приводит к отображению выбранного изображения в области основного изображения.

См. ссылку на кодовую ссылку ниже с кодом пример, и вы можете видеть, что вы можете перемещаться по миниатюрам, но нажатие Enter на миниатюре ничего не делает:

Код с демонстрационной ссылкой:

https://codepen.io/asifkhanlush/pen/oNjvVpG?editors=1111

Код:

HTML: 

<body>
    <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
            <div tabindex="0" role="button" class="swiper-slide">
                <div class="swiper-slide-container">Slide 1</div>
            </div>
            <div tabindex="0" role="button" class="swiper-slide">
                <div class="swiper-slide-container">Slide 2</div>
            </div>
            ....
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            <div tabindex="0" role="button" class="swiper-slide">
                <div class="swiper-slide-container" >Slide 1</div>
            </div>
            <div class="swiper-slide" tabindex="0" role="button">
                <div class="swiper-slide-container">Slide 2</div>
            </div>
            ...
        </div>
</div>

JS: 

var galleryTop = new Swiper('.gallery-top', {
    spaceBetween: 10,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    loop: true,
    loopedSlides: 4
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
  spaceBetween: 10,
  centeredSlides: true,
  slidesPerView: 'auto',
  touchRatio: 0.2,
  slideToClickedSlide: true,
      loop: true,
      loopedSlides: 4
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
...