Как повторно инициализировать слайдер после его уничтожения?

Question

[cupacabka]

Есть слайдер, нужно, чтобы он отрабатывал с одними параметрами до 857 и дальше вместо листания появлялся эффект фейд. Через брейкпоинты такое не сделать. Надо дестрой делать слайдера и заново его инициализировать. С первой частью справился. Он на заданном разрешении деактивируется. Но не могу сделать, чтобы на определенном разрешении он снова активировался. Пишет в девтулс ошибку Uncaught TypeError: Cannot read property 'destroy' of undefined.

Код

let sliderAbout = document.querySelector(".project__slider");

let mySwiper;

function sl() {
  if (window.innerWidth > 857) {
    mySwiper = new Swiper(sliderAbout, {
      observer: true,
      observeParents: true,
      slidesPerView: 1,
      spaceBetween: 50,
      speed: 800,
      direction: "vertical",
      centeredSlides: true,
      pagination: {
        el: ".swiper-pagination",
        type: "bullets",
        clickable: true,
      },
    });
  }
  if (window.innerWidth < 857) {
    mySwiper.destroy();
  }
}

sl();
window.addEventListener("resize", () => {
  sl();
});




let sliderAbout2 = document.querySelector(".project__slider_mob");

let mySwiper2;

function sl2() {
  if (window.innerWidth < 857) {
    mySwiper2 = new Swiper(sliderAbout2, {
      observer: true,
      observeParents: true,	  
	  effect: 'fade',
	  fadeEffect: {
		crossFade: true
	  },
	  autoplay: {
		delay: 1000,
		disableOnInteraction: false,
	},
      spaceBetween: 50,
      speed: 800,      
      centeredSlides: true,
    //   pagination: {
    //     el: ".swiper-pagination",
    //     type: "bullets",
    //     clickable: true,
    //   },
    });
  }
  if (window.innerWidth > 857) {
    mySwiper2.destroy();
  }
}

sl2();
window.addEventListener("resize", () => {
  sl2();
});

Answer 1

[Вадим]

А Вы документацию читали?

Destroy slider instance and detach all events listeners, where
deleteInstance - boolean - Set it to false (by default it is true) to not to delete Swiper instance
cleanStyles - boolean - Set it to true (by default it is true) and all custom styles will be removed from slides, wrapper and container. Useful if you need to destroy Swiper and to init again with new options or in different direction

Передайте false в метод destroy.

И как предложение: а что если не делать destroy, а в зависимости от размеров окна браузера делать init с разными настройками?

Comments

[cupacabka]

Там проблема мне видится в том, что код пытается применить дестрой из втрой инициализации на разрешении выше 857, а по сути второго слайдера еще нет и уничтожать по сути нечего. Надо как то провести проверку, есть ли на разрешении больше 857 слайдер второй инициализации, тогда запускать дестрой. Но как проверить?

[Вадим]

cupacabka, у вас код как-то награмождён.
Вам нужна 1 функция, которую нужно вызвать при загрузке документа и при ресайзе.
Скажем,

var sliderElement = document.querySelector(".project__slider");
var swiperSlider = {};
var sliderType = window.innerWidth < 857 ? 'mobile' : 'desktop'

function initSlider(type) {
  var sliderSettings = {}
  if(type === 'mobile') {
    sliderSettings = {
     // описание настроек для мобильной вариации.
    }
  } else {
    sliderSettings = {
     // описание настроек для десктопной вариации.
    }
  } // конец if-else
  swiperSlider = new Swiper(sliderElement, sliderSettings)
}

initSlider(sliderType)

window.addEventListener("resize", () => {
  if(window.innerWidth < 857 && sliderType == 'desktop') {
    sliderType = 'mobile'
    initSlider(sliderType)
  } else if(window.innerWidth >= 857 && sliderType == 'mobile') {
    sliderType = 'desktop'
    initSlider(sliderType)
  }
});

Ну и, возможно, в функции инициализации слайдера, перед вызовом new Swiper, нужно будет проверить есть ли свойство destroy в swiperSlider и если если, вызвать его.

[cupacabka]

я попробовал ваш код, вставил настройки слайдера, что то не работает. слайдер на 857 пропадает, обратно при увеличении возаращается, после чего видно что фейд эффект с мобильки пытается работать но слайдер тут же затухает

[Вадим]

cupacabka, а дестрой попробовали добавить где сказал?

[Вадим]

cupacabka, Ну а ещё Вы слайдер в двух разных элементах вызывали. В моём коде используется один и тот же элемент. Может у Вас там на css что-то скрывается, или ещё что. Вы же не весь код предоставли и в песочницу не помещали.

[cupacabka]

Нет, я немного не понял где. Вы извините я в js пока полный ноль.

Я пытаюсь запустить для своего первоначального кода проверку дополнительную для дестроя слайдера мобильного. Использую дата сет у класса по которому идет инициализация. Передаю ему на определенном разрпешении тру или фолс. но почему то остаются стили от мобильного слайдера на большом разрешении

[cupacabka]

Вадим, нет, по css ничего не скрывается. В вашем варианте кода я так понимаю не происходит уничтожение первого слайдера, потому что на малом разрешении класс его project__slider project__slider_mob _swiper swiper-bild swiper-container-initialized swiper-container-vertical swiper-container-fade swiper-container-horizontal То есть классы их слайдера с десктопа и мобилки. Я немного не понял, про "перед вызовом new Swiper, нужно будет проверить есть ли свойство destroy в swiperSlider и если если, вызвать его."

[Вадим]

cupacabka,

перед вызовом new Swiper, нужно будет проверить есть ли свойство destroy в swiperSlider и если есть, вызвать его.

Функция примет вид:

function initSlider(type) {
  var sliderSettings = {}
  if(type === 'mobile') {
    sliderSettings = {
     // описание настроек для мобильной вариации.
    }
  } else {
    sliderSettings = {
     // описание настроек для десктопной вариации.
    }
  } // конец if-else
  // Проверяем, есть ли в объекте слайдера метод destroy, и если есть - вызываем его.
  if(swiperSlider.destroy && typeof swiperSlider.destroy === 'function') {
    swiperSlider.destroy() // Возможно,если в круглые скобки передать true то будет лучше.
  }
  swiperSlider = new Swiper(sliderElement, sliderSettings)
}

[cupacabka]

Вадим, нет, к сожалению все также. Отрабатывает слайдер для десктоп версии, далее на нужном брекпоинте все пропадает, а в девтулс классы вертикального слайдера с пк версии и одновременно классы для слайдера от мобилки
project__slider project__slider_mob _swiper swiper-bild swiper-container-initialized swiper-container-vertical swiper-container-fade swiper-container-horizontal

Пробовал тру тру в дестрой вставлять

[Вадим]

cupacabka, через запятую?
.destroy(true, true) ?

[Вадим]

cupacabka, Попробуйте с разной конфигурацией.
По убыванию вероятности:
.destroy(false, true)
.destroy(true, true)
.destroy(true, false)
.destroy(false, false)

[cupacabka]

swiperSlider.destroy(true, true) так.
Я нагуглил решение и вроде сделал

Код конечно громоздкий но вроде работает

let sliderAbout = document.querySelector(".project__slider");

let mySwiper;

function sl() {
  if (window.innerWidth > 857) {
    mySwiper = new Swiper(sliderAbout, {
      observer: true,
      observeParents: true,
      slidesPerView: 1,
      spaceBetween: 50,
      speed: 800,
      direction: "vertical",
      centeredSlides: true,
      pagination: {
        el: ".swiper-pagination",
        type: "bullets",
        clickable: true,
      },
    });
  }
  if (window.innerWidth < 857) {
	mySwiper.destroy();
	sliderAbout.dataset.mobile = "false";
  }
}

sl();
window.addEventListener("resize", () => {
  sl();
});



var mySwiper2 = undefined;
function initSwiper() {
    var screenWidth = $(window).width();
    if(screenWidth < 857 && mySwiper2 == undefined) {            
        mySwiper2 = new Swiper('.project__slider_mob', {            
			observer: true,
			      observeParents: true,
			      effect: "fade",
			      fadeEffect: {
			        crossFade: true,
			      },
			      autoplay: {
			        delay: 1000,
			        disableOnInteraction: false,
			      },
			      spaceBetween: 50,
			      speed: 800,
        });
    } else if (screenWidth > 857 && mySwiper2 != undefined) {
        mySwiper2.destroy();
        mySwiper2 = undefined;
             
    }        
}

//Swiper plugin initialization
initSwiper();

//Swiper plugin initialization on window resize
$(window).on('resize', function(){
    initSwiper();        
});

[Вадим]

cupacabka, Чтож, тогда, мы можем отметить ответ решением, а я допишу чтобы читали комментарии. Тогда другие пользователи будут знать что тут есть подходящий ответ.

[cupacabka]

Вадим, Вроде бы тот вариант, что вы давали тоже заработал. Странно, что первый раз он не пошел

var sliderElement = document.querySelector(".project__slider");
var swiperSlider = {};
var sliderType = window.innerWidth < 857 ? "mobile" : "desktop";

function initSlider(type) {
  var sliderSettings = {};
  if (type === "mobile") {
    sliderSettings = {
      observer: true,
      observeParents: true,
      effect: "fade",
      fadeEffect: {
        crossFade: true,
      },
      autoplay: {
        delay: 1000,
        disableOnInteraction: false,
      },
      spaceBetween: 50,
      speed: 800,
      centeredSlides: true,

      // описание настроек для мобильной вариации.
    };
  } else {
    sliderSettings = {
      observer: true,
      observer: true,
      observeParents: true,
      slidesPerView: 1,
      spaceBetween: 50,
      speed: 800,
      direction: "vertical",
      centeredSlides: true,
      pagination: {
        el: ".swiper-pagination",
        type: "bullets",
        clickable: true,
      },

      // описание настроек для десктопной вариации.
    };
  } // конец if-else
  // Проверяем, есть ли в объекте слайдера метод destroy, и если есть - вызываем его.
  if (swiperSlider.destroy && typeof swiperSlider.destroy === "function") {
    swiperSlider.destroy(); // Возможно,если в круглые скобки передать true то будет лучше.
  }
  swiperSlider = new Swiper(sliderElement, sliderSettings);
}

initSlider(sliderType);

window.addEventListener("resize", () => {
  if (window.innerWidth < 857 && sliderType == "desktop") {
    sliderType = "mobile";
    initSlider(sliderType);
  } else if (window.innerWidth >= 857 && sliderType == "mobile") {
    sliderType = "desktop";
    initSlider(sliderType);
  }
});

[Вадим]

cupacabka, ну, может что-то закешировалось. Бывает.

[Вадим]

cupacabka, отметьте ответ решением, если он решает поставленный вопрос, чтобы другие пользователи ресурса знали, что на этот вопрос дан подходящий ответ.

[Andrey M.]

Тоже парился с этой ситуацией, но ничего выше не помогло - на десктопе секция продолжала крутиться. Этот пост на запрос вылезал постоянно, но чет не помог. В итоге заработало этим образом:

if (document.querySelector('.home-testimonials__grid')) {
	let htInit = false;
	let htSwiper;

	function swiperCard() {
		if (window.innerWidth <= 767) {
			if (htInit == false) {
				htInit = true;
				htSwiper = new Swiper(".home-testimonials__grid", {
					slidesPerView: 1.2,
					spaceBetween: 20,
				});
			}
		} else if (htInit && htSwiper) {
			htSwiper.destroy();
			htInit = false;
			htSwiper = null; 
		}
	}

	swiperCard();
	window.addEventListener("resize", swiperCard);
}