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

153
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();
  }
})
READ ALSO
Изменить кодировку cmd при старте jar

Изменить кодировку cmd при старте jar

Делаю консольное приложение, которое получает на вход стороку и фильит, а затем выводит по заданному фильтру соответствующие словаПри двойном...

226
вывод в лог русские буквы

вывод в лог русские буквы

Хочу проверить правильность заполнения из проперти и вывожу в логНо там абракадабра непонятная

310
Преобразование Map с помощью Stream API

Преобразование Map с помощью Stream API

Имеется структура типа Map<String, List<MyClass>>Как с помощью Stream API преобразовать ее к типу Map<String, List<MyClass

298