Estoy trabajando en un código que inicia/cambia el tamaño de Swiper Slider si la pantalla es más pequeña que 768px y destruye si es más grande.
Este código funciona, pero cuando el navegador se reinicia con un ancho superior a 768 px, aparece un mensaje de error:
TypeError no detectado: swiper.destroy no es una función en swiperMode (home.js:1:817) en home.js:1:878
/* Swiper Slider Cards Home - Show only on mobile */ var swiper = Swiper; var init = false; function swiperMode() { let mobile = window.matchMedia("(min-width: 0px) and (max-width: 768px)"); if (mobile.matches) { if (!init) { init = true; swiper = new Swiper(".slider-cards-js", { direction: "horizontal", slidesPerView: "auto", centeredSlides: true, spaceBetween: 32, pagination: { el: ".swiper-pagination", clickable: true, }, }); } } else { swiper.destroy(); init = false; } } window.addEventListener("load", function () { swiperMode(); }); window.addEventListener("resize", function () { swiperMode(); });Solución:
var init = false; function swiperCard() { if (window.innerWidth <= 768) { if (!init) { init = true; swiper = new Swiper(".slider-cards-js", { direction: "horizontal", slidesPerView: "auto", centeredSlides: true, spaceBetween: 32, pagination: { el: ".swiper-pagination", clickable: true, }, }); } } else if (init) { swiper.destroy(); init = false; } } swiperCard(); window.addEventListener("resize", swiperCard);Cambie .slider-cards-js a su división principal de swiper.