@castetus

Почему не работает Swiper с тегом picture в слайдах?

Всем доброго временеи суток, внезапно столкнулся со странным глюком свайпера - если в слайде использовать тег picture, слайдер не инициализируется.
Разметка:
<div class="swiper-container howto">
      <div class="swiper-wrapper"> 
        <div class="howto__slide swiper-slide">
          <picture class="howto__picture">
            <source srcset="img/howto_s_1.jpg" media="(max-width: 574px)"/>
            <source srcset="img/howto_1.jpg" media="(min-width: 575px)"/><img class="howto__img" src="img/howto_s_1.jpg" alt=""/>
          </picture>
        </div>


JS:
document.addEventListener('DOMContentLoaded', function(){
  const howtoSlider = new Swiper('.howto', {
    navigation: {
      nextEl: '.slider-button-next',
      prevEl: '.slider-button-prev',
    },
  })
})


Если убрать picture, оставить просто img, ничего больше не меняя - все работает.
Сталкивался кто-нибудь? Что за ерунда такая?
Или может есть другой способ (кроме picture) загружать изображения с разными путями в зависимости от разрешения?
  • Вопрос задан
  • 39 просмотров
Решения вопроса 1
@castetus Автор вопроса
В общем, иссследование вопроса показало следующее:
При наличии на странице других скриптов Swiper почему-то не успевал полностью инициализироваться. То есть контейнер он подхватывал, а сами слайды - нет. Пока вопрос решен при помощи асинхронной инициализации:
document.addEventListener('DOMContentLoaded', function(){
  setTimeout(() => {
    const howtoSlider = new Swiper('.howto', {
    loop: true,
    navigation: {
      nextEl: '.slider-button-next',
      prevEl: '.slider-button-prev',
    },
  })
  }, 1000);
})

Странно еще, что эффект проявлялся только при picture в слайдах, при img все было нормально.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы