Estoy publicando aquí porque después de muchas horas de investigación y algunos dolores de cabeza no encontré una solución a un problema con swiper JS en mi sitio web.
En mi caso, tengo un sitio web de WordPress y tengo una página de archivo con muchos listados, cada uno con un control deslizante (Swiper JS) que muestra imágenes relevantes del listado.
Funciona bien hasta que aplico un filtro a la página (por ejemplo, seleccione para mostrar una propiedad con 4 camas) (así que pienso antes de hacer una solicitud AJAX).
La página se recarga con AJAX y muestra solo listados relevantes, el único problema es que el Swiper Slider ya no funciona, de hecho, no puedo deslizarlo.
Por lógica, creo que necesito reiniciar Swiper después de cada llamada de AJAX, pero como no soy tan bueno en AJAX, me pregunto si alguien puede orientarme en la dirección correcta. Muchísimas gracias.
Mi código Swiper:
jQuery(document).ready(function() { const swiper = new Swiper('.swiper', { // Optional parameters direction: 'horizontal', effect: 'slide', speed: 150, loop: true, observer: true, // Navigation arrows navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: { el: '.swiper-pagination', }, }); });¿Por qué no usas swiper lazy y param-lazy-loadPrevNext ?
Probablemente tengas razón. Cuando se actualiza el contenedor de resultados con las instancias de Swiper, Swiper necesita reinicializar los nuevos elementos de resultados cuando se adjuntan al DOM.
Debería poder reutilizar el mismo inicializador Swiper. Simplemente colóquelo en una función separada. Luego llame a esa función en la carga del documento (como lo está ahora) y cuando se carguen los resultados de AJAX, después de que se actualice el DOM.
Ejemplo:
let swiper; function initSwiper() { swiper = new Swiper('.swiper', { // Optional parameters direction: 'horizontal', effect: 'slide', speed: 150, loop: true, observer: true, // Navigation arrows navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: { el: '.swiper-pagination', }, }); } jQuery(document).ready(function() { initSwiper(); // <--------------- // ... $.ajax({ url: '/ajax-url/', dataType: "json", type: "Post", async: true, data: { }, success: function (data) { $('#results').html(data.results_html); initSwiper(); // <--------------- }, error: function (xhr, exception) { // Error handling } }); });