Как в SWIPER SLIDER обновлять параметр при изменении окна браузера?

Question

[Cheizer]

Есть SWIPER слайдер. У него есть параметр autoHeight который позволяет делать высоту каждого слайда в зависимости от его контента.

Так вот, на мобильной версии при размере окна меньше 655px я включаю этот параметр.
А по умолчанию отключаю на больших что бы все слайды были одинаковой высоты по самому большому слайду.
Если менять размер окна и обновлять потом страницу, проблем нет.

НО ВОТ БЕДА, как обновлять слайдер, динамически? Если изменить размер окна, как применить параметр без перезагрузки страницы?

Поднял пример https://codepen.io/Cheizer/pen/gOYgYdN

const breakpoint = window.matchMedia( '(min-width:655px)' );

  const breakpointChecker = function() {
    if ( breakpoint.matches === true ) {
      console.log('ширина больше');
      return autoheight(breakpoint.matches);
      } else if ( breakpoint.matches === false ) {
        console.log('ширина меньше');
        return autoheight(breakpoint.matches);
      }
  };


    var  s6 = new Swiper('.swiper-container', {
         spaceBetween: 10,
        slidesPerView: 'auto',
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
         clickable: true,
  }, 
      breakpoints: {
                // когда ширина окна меньше или равна <= 655px
                655: {
                    autoHeight: true,
                },

            },
        slideToClickedSlide: true
    });

const autoheight = function(e) {
if ( e === true ) {
 //s6.update();
  s6.params.autoHeight = false;
  s6.reInit();
  s6.updateAutoHeight();
}else{

   s6.params.autoHeight = true;
  s6.reInit();
  s6.updateAutoHeight();
}
}
breakpoint.addListener(breakpointChecker);
breakpointChecker();

Есть много параметров в API https://idangero.us/swiper/api/#methods, я все испробовал при изменении окна

params.autoHeight = true;
reInit();
.updateAutoHeight();

Ничего не помогает, только после перезагрузки страницы применяются параметры. Как применить параметры при изменении окна браузера?

Answer 1

[Sashqa]

Поменяйте на

const breakpoint = window.matchMedia( '(max-width:655px)' );

И добавьте в ваше условие

s6.destroy();
s6 = new Swiper('.swiper-container', settings);

Comments

[Cheizer]

Спасибо! Разобрался, сразу не понял ваше решение, слабоват в JS. Но разобрался.

s6.destroy();
s6 = new Swiper('.swiper-container', {
autoHeight: false,
      });

[Cheizer]

Роман Кузнецов, Роман Кузнецов, но все равно что то не то, нужно все параметры дублировать получается?

[Cheizer]

Все понял :)) Параметры вынес отдельно.

var settings = {
     spaceBetween: 10,
        slidesPerView: 'auto',
        slideToClickedSlide: true,
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
         clickable: true,
  }, 
      breakpoints: {
                // когда ширина окна меньше или равна <= 655px
                655: {
                    autoHeight: true,
                },
            },
}

Благодарю!