• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

342
Vistas
Swiper Slider: solo mostrar en dispositivos móviles

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(); });
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda