Как отключить swiper на определенном разрешении экрана? Как внутри слайда интегрировать таб, который увеличивает высоту слайда?

Question

[Evtera]

Здравствуйте. Есть слайдер на базе swiper. По сути, там один большой слайдер, и внутри последнего слайдера встроен другой слайдер.

1) Не могу понять, как отключить оба слайдера при определенном breakpoint
2) и как во втором внутреннем слайдере реализовать функцию, когда будут подгружаться картинки, тем самым увеличивая высоту слайдера. В настоящий момент, при подгрузке всё ломается, даже не смотря на observe.

var mainSwiper = new Swiper(".main-slider", {
  slidesPerView: 1,
  mousewheel: true,
  observer: true,
  observeSlideChildren: true,
});

var innerSwiper = new Swiper(".second-slider", {
  direction: "vertical",
  mousewheel: true,
  freeMode: true,
  nested: true,
  observer: true,
  observeParents: true,
  autoHeight: true,
  slidesPerView: "auto",
  scrollbar: {
    el: ".swiper-scrollbar",
    draggable: true,
    hide: false,
  },
});

const changeDirection = (slider) => {
  window.innerWidth <= 1024 ? slider.destroy(true, true) : slider.init();
};

window.addEventListener("resize", () => {
  changeDirection(innerSwiper);
  changeDirection(mainSwiper);
});

changeDirection(mainSwiper);
changeDirection(innerSwiper);

Comments

[Вадим]

Ну давайте по порядку.

const changeDirection = (slider) => {
window.innerWidth <= 1024 ? slider.destroy(true, true) : slider.init();
};

Не работает? Слайдер не выключается?

[Evtera]

Вадим, выключается. Но потом не включается) Я подозреваю, что нужно передавать обьект в slider.init. Но в документации про это ничего не говорится

[Вадим]

Evtera, К сожалению, документации не всегда идеальны. У меня не большой опыт именно со свайпером, но, подозреваю, что Вы подозреваете совершенно верно. Так как Вы передаёте true true в destroy, иначе, там вроде как сохраняются параметры.

[Вадим]

Evtera, Как гласит документация к методу destroy:

deleteInstance - boolean - Установите значение false (по умолчанию это true), чтобы не удалять экземпляр Swiper

А Вы передаёте true, вот экземпляр и удаляется со всеми настройками.



Но надо проверять :-)

[Evtera]

Вадим, я туда что только не писал, не помогает :(

[Вадим]

Evtera, Ну не знаю, вот всё работает ровно как я описал.
1) Проверьте что всё крутится.
2) Нажмите первую кнопку(exterminate) - всё сломается и станет просто текстом.
2) Нажмите вторую кнопку(init) - всё снова станет слайдером с теми же настройками. Это можно понять по параметру spaceBetween

А если передавать true в destroy то init уже не работает и бьёт ошибку в консоль.

А вот если передавать в init объект с настройками - то не работает. Что, собственно, и указано в документации. Что метод init не ожидает аргумента с параметрами.

[Вадим]

Evtera, Даа, точно, есть косяк. Включение\выключение ограниченное количество раз)

[Evtera]

Вадим, залил в песочницу. Может так что-то прояснится