Удаление swiper на мобильном/десктопе
Удаление swiper на мобильном/десктопе
На сайте есть много слайдеров swiper, одни нужны только на десктопе, другие - на мобильном.
Хотелось бы создать отдельную функцию, которая принимала нужные параметры и генерировала слайдеры для разных экранов.
Код удаления/инициализации swiper взят с сайта - https://medium.com/@networkaaron/swiper-how-to-destroy-swiper-on-min-width-breakpoints-a947491ddec8
Код ниже запускает разные слайдеры, на нужных разрешениях, но мне не понятно как каждому экземпляру swiper передавать нужные для него параметры?
Создаем массив в котором храним медиа запросы и контейнеры для swiper.
const obj = {
slider: {
container: ".slider-main__swiper",
media: "(max-width: 991px)",
},
slider2: {
container: ".set-goods__slider",
media: "(min-width: 991px)",
}
};
Передаем его в нашу функцию.
const sliders = (obj) => {
//перебираем объект
for (let key in obj) {
//передаем наш медиа запрос в breakpoint
const breakpoint = window.matchMedia(obj[key].media);
// отслеживаем экземпляры swiper
let sectionSlider;
const breakpointChecker = function () {
// если условие выполняется, удаляем swiper
if (breakpoint.matches === true) {
if (sectionSlider !== undefined) sectionSlider.destroy(true, true);
return;
// иначе, запускаем функцию, которая создаст экземпляр swiper
} else if (breakpoint.matches === false) {
return enableSwiper();
}
};
const enableSwiper = function () {
sectionSlider = new Swiper(obj[key].container, {
// configure Swiper to use modules
});
};
breakpoint.addListener(breakpointChecker);
breakpointChecker();
}
};
export default sliders;