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

Друзья, помогите решить простую задачку.
Есть 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();

Ничего не помогает, только после перезагрузки страницы применяются параметры. Как применить параметры при изменении окна браузера?
  • Вопрос задан
  • 42 просмотра
Решения вопроса 1
@Sashqa
Поменяйте на
const breakpoint = window.matchMedia( '(max-width:655px)' );


И добавьте в ваше условие
s6.destroy();
s6 = new Swiper('.swiper-container', settings);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
17 сент. 2019, в 09:53
500 руб./в час
17 сент. 2019, в 07:36
500 руб./за проект
17 сент. 2019, в 05:19
4000 руб./за проект