0

Есть на странице Swiper, внутри контейнера лежит список со слайдами

<li class="product__item swiper-slide">
  <a href="product.html">
    <figure>
      <picture>
        <!-- 1x: 270 ; 2x: 540 -->
        <source type="image/webp" srcset="img/catalog-img/marble-earrings-desktop.webp 1x, img/catalog-img/marble-earrings-desktop@2x.webp 2x">
        <img loading="lazy" src="img/catalog-img/marble-earrings-desktop.jpg" srcset="img/catalog-img/marble-earrings-desktop@2x.jpg 2x" width="270" height="284" alt="silver earrings with a marble stone">
      </picture>
      <p>Marble earrings</p>
      <p>$ 95</p>
    </figure>
  </a>
</li>

Таких слайдов 15, в контейнер умещается 4. Если табом идти по странице и дойти до свайпера, то он начинает листать эти слайды из за ссылки внутри, чего не хотелось бы... Как при помощи документации решить данную задачу? Есть идея, чтобы на неактивные слайды вешать tabindex='-1' , но активными он считает почему то только первый слайд в контейнере

1 ответ 1

0
function setTabIndex() {
  swiper.slides[swiper.activeIndex].querySelector('a').setAttribute('tabindex', '0');
  swiper.slides[swiper.activeIndex + 1].querySelector('a').setAttribute('tabindex', '0');
  swiper.slides[swiper.activeIndex + 2].querySelector('a').setAttribute('tabindex', '0');
  swiper.slides[swiper.activeIndex + 3].querySelector('a').setAttribute('tabindex', '0');
}

const swiperContainer = body.querySelector('.swiper-wrapper');
const swiperLinks = swiperContainer.querySelectorAll('a[href]');
for (let link of swiperLinks) {
  link.setAttribute('tabindex', '-1');
  setTabIndex();
}


swiper.on('activeIndexChange', function() {
  for (let link of swiperLinks) {
    link.setAttribute('tabindex', '-1');
  }

  setTabIndex();
})

В общем такими костылями сделал, можно немого оптимизировать, но задачи такой не стоит. Методом swiper.slides получаем массив из слайдов далее swiper.activeIndex возвращает число активного слайда, ну и далее вешаем нужный нам атрибут

1
  • Ваш ответ можно улучшить с помощью дополнительной информации. Пожалуйста, нажмите править для добавления подробностей, например, цитат или документации, чтобы другие могли подтвердить правильность вашего ответа. Вы можете найти дополнительную информацию о том, как писать хорошие ответы в Справке. 3 фев 2022 в 17:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.