Удаление 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;

Ответы (0 шт):