swiper. js - ошибка "this.params is undefined" после уничтожения (true, true) - PullRequest
Новая
       162

swiper. js - ошибка "this.params is undefined" после уничтожения (true, true)

0 голосов
/ 14 июля 2020

Вот код: https://codepen.io/reti/pen/rNxrGwP

const galleryTopWrapper = document.querySelector(
  '.gallery-top .swiper-wrapper'
);
const galleryThumbsWrapper = document.querySelector(
  '.gallery-thumbs .swiper-wrapper'
);
let galleryTop;
let galleryThumbs;

function createTopOrThumbSlider(c, d) {
  a = document.createElement('DIV');
  a.classList.add('swiper-slide');
  b = document.createElement('DIV');
  b.classList.add('swiper-slide-container');
  b.innerHTML = `Slide ${d}`;
  a.appendChild(b);
  c.appendChild(a);
}

function createNew() {
  var i;
  for (i = 1; i <= 5; i++) {
    createTopOrThumbSlider(galleryTopWrapper, i);
    createTopOrThumbSlider(galleryThumbsWrapper, i);
  }

  galleryTop = new Swiper('.gallery-top', {
    spaceBetween: 10,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    loop: true,
    loopedSlides: 4,
  });
  galleryThumbs = new Swiper('.gallery-thumbs', {
    spaceBetween: 10,
    centeredSlides: true,
    slidesPerView: 'auto',
    touchRatio: 0.2,
    slideToClickedSlide: true,
    loop: true,
    loopedSlides: 4,
  });
  galleryTop.controller.control = galleryThumbs;
  galleryThumbs.controller.control = galleryTop;

  galleryTop.update();
  galleryThumbs.update();
}

createNew();

function destroyAll() {
  if (galleryTop) {
    galleryTop.removeAllSlides();
    galleryTop.destroy(true, true);
  }
  if (galleryThumbs) {
    galleryThumbs.removeAllSlides();
    galleryThumbs.destroy(true, true);
  }
}

function destroyAllAndCreateNew() {
  destroyAll();
  createNew();
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
  height: 300px;
}

.swiper-container {
  width: 100%;
  height: 300px;
  margin: 20px auto;
}

.swiper-slide-container {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: 100%;
  max-width: 600px;
  margin: auto;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.gallery-top {
  height: 80%;
  width: 100%;
}

.gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.gallery-thumbs .swiper-slide {
  width: 20%;
  height: 100%;
  opacity: 0.4;
}

.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<head>
    <meta charset="ISO-8859-1">
</head>

<body>
    <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
        </div>
    </div>
    <button onclick="destroyAll()">destroyAll()</button>
    <button onclick="createNew()">createNew()</button>
    <button onclick="destroyAllAndcreateNew()">destroyAllAndCreateNew()</button>
</body>

Я хотел бы удалить galleryTop и galleryThumbs с помощью destroyAll (), а затем добавить новые слайды с помощью createNew (). destroyAll () вызывает TypeError: "this.params is undefined". Как мне от этого избавиться?

Обязательный бла-бла-бла: когда есть перерыв между вызовами destroyAll () и createNew (), он работает, но когда вызовы следуют сразу же, выполнение кода прерывается.

1 Ответ

0 голосов
/ 14 июля 2020

Думаю, готово: https://codepen.io/reti/pen/QWyVbeB

const galleryTopWrapper = document.querySelector(
  ".gallery-top .swiper-wrapper"
);
const galleryThumbsWrapper = document.querySelector(
  ".gallery-thumbs .swiper-wrapper"
);
let galleryTop;
let galleryThumbs;

function createTopOrThumbSlider(c, d) {
  a = document.createElement("DIV");
  a.classList.add("swiper-slide");
  b = document.createElement("DIV");
  b.classList.add("swiper-slide-container");
  b.innerHTML = `Slide ${d}`;
  a.appendChild(b);
  c.appendChild(a);
}

function createNew() {
  var i;
  for (i = 1; i <= 5; i++) {
    createTopOrThumbSlider(galleryTopWrapper, i);
    createTopOrThumbSlider(galleryThumbsWrapper, i);
  }

  galleryTop = new Swiper(".gallery-top", {
    spaceBetween: 10,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },
    loop: true,
    loopedSlides: 4
  });
  galleryThumbs = new Swiper(".gallery-thumbs", {
    spaceBetween: 10,
    centeredSlides: true,
    slidesPerView: "auto",
    touchRatio: 0.2,
    slideToClickedSlide: true,
    loop: true,
    loopedSlides: 4
  });
  galleryTop.controller.control = galleryThumbs;
  galleryThumbs.controller.control = galleryTop;

  galleryTop.update();
  galleryThumbs.update();
}

createNew();

function destroyAll() {
  if (galleryTop) {
    galleryTop.destroy(true, true);
  }
  if (galleryThumbs) {
    galleryThumbs.destroy(true, true);
  }
  document.querySelectorAll(".swiper-slide").forEach((el) => {
    el.remove();
  });
}

function destroyAllAndCreateNew() {
  destroyAll();
  console.log('destroyed correct')
  createNew();
  console.log('created correct')

}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
  height: 300px;
}

.swiper-container {
  width: 100%;
  height: 300px;
  margin: 20px auto;
}

.swiper-slide-container {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: 100%;
  max-width: 600px;
  margin: auto;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.gallery-top {
  height: 80%;
  width: 100%;
}

.gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.gallery-thumbs .swiper-slide {
  width: 20%;
  height: 100%;
  opacity: 0.4;
}

.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<head>
  <meta charset="ISO-8859-1">
</head>

<body>
  <div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
  <div class="swiper-container gallery-thumbs">
    <div class="swiper-wrapper">
    </div>
  </div>
  <button onclick="destroyAll()">destroyAll()</button>
  <button onclick="createNew()">createNew()</button>
  <button onclick="destroyAllAndCreateNew()">destroyAllAndcreateNew()</button>
</body>

Проблема была здесь: 

function destroyAll() {
            if (galleryTop) {
                galleryTop.destroy(true, true);
            }
            if (galleryThumbs) {
                galleryThumbs.destroy(true, true);
            }
            document.querySelectorAll('.swiper-slide').forEach(el => {
                el.remove()
            })
        }
...