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

Question

[castetus]

Всем доброго временеи суток, внезапно столкнулся со странным глюком свайпера - если в слайде использовать тег 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) загружать изображения с разными путями в зависимости от разрешения?

Comments

[xdevelx]

Дело не в теге. Вот пример слайдера с использованием picture https://motolog.app/en/#screenshots

[Evgeniy]

в песочнице бы это увидеть, поправим

[castetus]

Вы будете смеяться, но в песочнице все работает.

[castetus]

Убрал все остальное со страницы, слайдер заработал. Буду искать причину, всем спасибо.

Answer 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 все было нормально.