Swiper js: destroy и init в зависимости от ширины экрана?

220

15 мая 2022, 22:30

Всем привет. Подскажите, пожалуйста, как решить проблему. Нужно инициализировать слайдер в зависимости от ширины экрана. Сделала условие, поставила листинер, destroy в зависимости от ширины экрана. Оно вроде работает, но не так как нужно. Если повторно начать ресайзить окно браузера, то destroy перестает срабатывать

let mql = window.matchMedia('(max-width: 767px)');
mql.addEventListener('change', (e) => {
  if (e.matches) {
    let newSwiper = new Swiper('.steps-slider', {
      slidesPerView: 1,
      centeredSlides: false,
      spaceBetween: 8,
      grabCursor: true,
      init: true
    });
  } else {
    swiper.destroy();
  }
})

Answer 1

let mql = window.matchMedia('(max-width: 767px)');
window.addEventListener('resize', () => {
  if (mql.matches) {
    let newSwiper = new Swiper('.steps-slider', {
      slidesPerView: 1,
      centeredSlides: false,
      spaceBetween: 8,
      grabCursor: true,
      init: true
    });
  } else {
    swiper.destroy();
  }
})