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

Проблема:

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

Сценарий:

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

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

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

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

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;

javascript slider html swiper accessibility
person orbnexus    schedule 08.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это ошибка/отсутствующая функция в Swiper (https://github.com/nolimits4web/swiper/issues/4324), но я нашел обходной путь.

По сути, добавьте data-slide-index ко всем миниатюрам и добавьте прослушиватель нажатия клавиш к элементам миниатюр:

galleryThumbs.$el.on("keydown", (e) => {
  if (e.keyCode !== 13 && e.keyCode !== 32) return;

  var slideIndex = e.target.dataset.slideIndex;

  if (!slideIndex) return;

  galleryThumbs.slideTo(slideIndex);
  galleryTop.slideTo(slideIndex);
});

Вот полный код с демонстрацией: https://codesandbox.io/s/swiper-thumbs-gallery-forked-2d1up?file=/index.html.

person Timon    schedule 12.03.2021