Home

swiper.js – "this.params is undefined" error after destroy(true, true)

Here’s code: 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>

I would like to destroy galleryTop and galleryThumbs with destroyAll() and then add new slides with createNew(). destroyAll() causes a TypeError: "this.params is undefined". How could I get rid of it?

Required blah blah blah: When there is a break between destroyAll() and createNew() calls, it works, but when calls follow immediately the code execution is aborted.

Asked on July 16, 2020 in Java Script.
Add Comment
Cancel
1 Answer(s)

I think it’s done: 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>

Problem was here:

function destroyAll() {             if (galleryTop) {                 galleryTop.destroy(true, true);             }             if (galleryThumbs) {                 galleryThumbs.destroy(true, true);             }             document.querySelectorAll('.swiper-slide').forEach(el => {                 el.remove()             })         }
Cancel
Answered on July 16, 2020.
Add Comment
Cancel

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.