Как отключать слайдер при уменьшении размеров окна?

Question

[Alexey10]

Сделал настройку слайдера swiper. Вот код:

function resizeScrenn() {
  if ($(window).width() >= 1200) {
    if ($("#swiper-container").length > 0) {
      var swiper = new Swiper('#swiper-container', {
        direction: 'vertical', // вертикальный слайдер
        slidesPerView: 1,
        spaceBetween: 0,
        loop: false,
        touchRatio: 0,
        slidesPerGroup: 1,
      });
    }
  }
}
resizeScrenn();

$(window).resize(function () {
    resizeScrenn();
});

Мне нужно отключить слайдер ниже расширения 1200px. Все работает, все получилось. Но не могу сделать так, чтобы он сразу отключился при изменении экрана. Мне постоянно нужно обновлять страницу ниже 1200px, чтобы он отключился. И код :

$(window).resize(function () {
    resizeScrenn();
});

не помогает.

Comments

[verycooldev]

А сейчас что только в оффлайн отключается?

[Alexey10]

verycooldev, Петросян

Answer 1

[Никита Баев]

В зависимости от того, что вам точно нужно сделать (остановить или вообще убрать инициализацию слайдера), то можно написать всё это так:

var swiper;

function resizeScrenn() {
    if ($(window).width() >= 1200) {
        if ($("#swiper-container").length > 0) {
            swiper = new Swiper('#swiper-container', {
                direction: 'vertical', // вертикальный слайдер
                slidesPerView: 1,
                spaceBetween: 0,
                loop: false,
                touchRatio: 0,
                slidesPerGroup: 1,
            });
        }
    } else {
        swiper.destroy(); // или swiper.autoplay.stop();
    }
}


resizeScrenn();

$(window).resize(function () {
    resizeScrenn();
});

Comments

[Alexey10]

Никит, я пробовал этот вариант, все равно как я уменьшил экран, ниже 1200 px не отключаеться сам, только после обновления страницы.