Отключить / включить функцию слайдера при изменении размера окна - PullRequest
Новая
       12

Отключить / включить функцию слайдера при изменении размера окна

0 голосов
/ 03 июля 2019

Я использую слайдер Swiper и хочу отключить его для рабочего стола, чтобы интерфейс выглядел немного иначе.

Способ, которым я достиг этого, состоял в том, чтобы создать прослушиватель события onload и проверить размер экрана для создания нового элемента Swiper. 

window.addEventListener("load", toggleSlider);
function toggleSlider() {
  var w = window.innerWidth;
  var container = document.getElementsByClassName("swiper-container");
  if ( w < 768 ) {
    var mySwiper = new Swiper(container, {
      // Optional parameters

То, чего я хотел бы достичь, - это уметьчтобы переключить эту функцию при изменении размера окна без перезагрузки страницы.Что-то вроде: 

 if ( w < 768 ) {
    var mySwiper = new Swiper(...
 }else{
  delete Swiper
 }

Я пытался удалить объект Swiper, так как код создает new Swiper(), но он не работает.

Любые идеи о том, как это может бытьдостигнуто?

1 Ответ

0 голосов
/ 03 июля 2019

Выберите элемент DOM, а затем уничтожьте его. 

e.g const mySwiepr = document...select it as you wish.

mySwiper.destroy(deleteInstance, cleanStyles);

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

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

cleanStyles - boolean - установите для него значение true (по умолчанию это значение true), и все пользовательские стили будут удалены из слайдов, оболочки и контейнера.Полезно, если вам нужно уничтожить Swiper и начать заново с новыми опциями или в другом направлении

Вам также необходим обработчик. ('Resize'), который проверяет 

if (condition) {select carousel then mySwiper.destroy()}

ссылка на документ

...