Активация/деактивация swiper при ресайзе окна браузера?

Question

[kamelot43]

Коллеги , приветствую ). Возник очередной вопрос по работе swiper.js. ) Необходимо показать карточки в виде слайдера на мобилке , и отображать в обычном виде (сетка bootstrap) на десктопе и планшете. Наверное нужно использовать метод mySwiper.destroy , но непонятно как быть с resize ?. На данный момент получилось просто деактивировать swiper на определенной ширине экрана , но при ресайзе экрана работает не корректно . Можно посмотреть где-то пример активации/деактивации слайдера при ресайзе экрана , где можно подсмотреть общую идею работы? Буду благодарен за помощь ) Заранее спасибо и хорошего рабочего дня )

Answer 1

[Дима Паутов]

2 варианта развития событий

1) Верстать 2 блока.
1й блок с сеткой товаров
2й блок слайдер, скрывать их через медиа запросы + делать инициализацию слайдера при нужном размере экрана и уничтожать когда размер не мобильный

2) Делать всё слайдером. Но тут дольше описывать. Лучше используйте 1й пункт

Код для слайдера примерно такой:

var catalogSlider = null;
var mediaQuerySize = 1024;

function catalogSliderInit () {
	if (!catalogSlider) {
		catalogSlider = new Swiper('.catalogSlider', {
			// ... ваши опции
		});
	}
}

function catalogSliderDestroy () {
	if (catalogSlider) {
		catalogSlider.destroy();
		catalogSlider = null;
	}
}

$(window).on('load resize', function () {
	// Берём текущую ширину экрана
	var windowWidth = $(this).innerWidth();
	
	// Если ширина экрана меньше или равна mediaQuerySize(1024)
	if (windowWidth <= mediaQuerySize) {
		// Инициализировать слайдер если он ещё не был инициализирован
		catalogSliderInit()
	} else {
		// Уничтожить слайдер если он был инициализирован
		catalogSliderDestroy()
	}
});

Дальше сами

Comments

[kamelot43]

Большое спасибо за подробный ответ. Вы мне очень помогли !

[Сергей Плахотин]

Поддержую, спасибо вам!!!!

Answer 2

[artuh_a]

Общая идея такая. Вешаешь обработчик на ресайз:

window.addEventListener('resize', resizeHandlerSlider);

Сравниваешь переменную clientWidth при вызове хэндлера и дестроишь свой слайдер.

const slider = document.querySelector('#slider');
let { clientWidth } = document.body;
let yourSlider;

const sliderInit = () => {
    yourSlider = new Swiper(slider, {...})
}

const resizeHandlerSlider = () => {
    if (clientWidth !== document.body.clientWidth) {
        clientWidth = document.body.clientWidth;

        if (yourSlider) {
            yourSlider.destroy();
        }

        sliderInit();
    }
}

Comments

[Andrew Johnson]

самый лучший ответ

Answer 3

[Alexey066]

а как сделать так, но в точности наоборот?
чтобы при мобильной версии слайдер не работал, а при десктопе, работал. на чистом js?
a