@kamelot43

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

Коллеги , приветствую ). Возник очередной вопрос по работе swiper.js. ) Необходимо показать карточки в виде слайдера на мобилке , и отображать в обычном виде (сетка bootstrap) на десктопе и планшете. Наверное нужно использовать метод mySwiper.destroy , но непонятно как быть с resize ?. На данный момент получилось просто деактивировать swiper на определенной ширине экрана , но при ресайзе экрана работает не корректно . Можно посмотреть где-то пример активации/деактивации слайдера при ресайзе экрана , где можно подсмотреть общую идею работы? Буду благодарен за помощь ) Заранее спасибо и хорошего рабочего дня )
  • Вопрос задан
  • 7456 просмотров
Решения вопроса 1
bootd
@bootd Куратор тега HTML
Гугли и ты откроешь врата знаний!
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()
	}
});

Дальше сами
Ответ написан
Пригласить эксперта
Ответы на вопрос 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();
    }
}
Ответ написан
@Alexey066
а как сделать так, но в точности наоборот?
чтобы при мобильной версии слайдер не работал, а при десктопе, работал. на чистом js?
a
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы