Crear un deslizador responsive y táctil conectado al CMS de Webflow parece sencillo… hasta que realmente lo intentas. La estructura de Lista de Colecciones de Webflow no te permite insertar los elementos necesarios de Swiper (swiper-wrapper, swiper-slide) directamente, lo que hace que la mayoría de las implementaciones fallen.
Después de probar muchos enfoques, este es el método más simple y completamente funcional:
Deja que Webflow genere su estructura CMS, y luego reconstruye dinámicamente el HTML requerido por Swiper usando JavaScript.
Este artículo te guía paso a paso por:
- La estructura HTML requerida
- Cómo Webflow realmente genera las listas CMS
- Por qué los enfoques típicos de Swiper fallan
- La solución final 100% funcional
- Código completo (listo para copiar y pegar)
- Estilos y configuraciones responsivas
El Problema: El CMS de Webflow Bloquea la Estructura
El CMS de Webflow siempre genera la siguiente estructura:
Contenedor de Lista de Colecciones
Lista de Colecciones
Elemento de Colección
Tu Contenido
No puedes insertar:
-
<div class="swiper-wrapper"> -
<div class="swiper-slide">
dentro de la lista CMS.
Esto es lo que impide que Swiper se inicialice.
El Objetivo: Una Estructura Real Compatible con Swiper
Swiper requiere esto:
.swiper-container
.swiper-wrapper
.swiper-slide
.swiper-slide
.swiper-slide
Pero como Webflow no te permite reestructurar el DOM dentro de una Lista de Colecciones, lo hacemos dinámicamente usando JavaScript.
Estructura Final de Webflow (en el Diseñador)
Solo necesitas construir esto en Webflow:
div.swiper-container
Contenedor de Lista de Colecciones
Lista de Colecciones
Elemento de Colección
Tarjeta (tu contenido)
botón-previo-swiper (bloque de texto)
botón-siguiente-swiper (bloque de texto)
paginación-swiper (bloque de texto)
Sin envoltorios adicionales.
Sin clases swiper-slide.
Sin incrustaciones necesarias dentro del CMS.
Todo lo demás lo maneja el script.
Paso 1 — Incluir el CSS de Swiper
Dentro de Ajustes del Proyecto → Código Personalizado → Dentro de <head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
Paso 2 — Añadir el JS + Cargador de Swiper
Dentro de Ajustes del Proyecto → Antes de la etiqueta </body>:
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const container = document.querySelector('.swiper-container');
if (!container) return;
// 1. Crear el real swiper-wrapper
const wrapper = document.createElement('div');
wrapper.classList.add('swiper-wrapper');
// 2. Mover cada elemento CMS dentro del nuevo wrapper
const cmsItems = container.querySelectorAll('.w-dyn-item');
cmsItems.forEach(item => {
item.classList.add('swiper-slide');
wrapper.appendChild(item);
});
// 3. Insertar el wrapper antes de la navegación
container.insertBefore(wrapper, container.querySelector('.swiper-button-prev'));
// 4. Inicializar Swiper
const swiper = new Swiper('.swiper-container', {
slidesPerView: 1.1,
spaceBetween: 20,
loop: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
768: { slidesPerView: 2.2 },
1024: { slidesPerView: 3 },
},
});
});
</script>
Paso 3 — CSS Opcional (Recomendado)
Dentro de Ajustes de Página → Dentro de <head>:
<style>
.swiper-container {
width: 100%;
position: relative;
overflow: hidden;
}
.swiper-wrapper {
display: flex;
}
.swiper-slide {
width: auto;
}
</style>
Esto asegura que las tarjetas no se colapsen y que Swiper maneje correctamente el ancho.
Por qué Este Método Funciona
Webflow CMS genera elementos .w-dyn-item que no puedes modificar manualmente
Convertimos dinámicamente cada .w-dyn-item en un verdadero .swiper-slide
Generamos dinámicamente .swiper-wrapper
Lo insertamos correctamente en el DOM de Webflow
Swiper se inicializa con éxito, cada vez
Funciona con cualquier cantidad de elementos CMS
Esto te permite crear deslizadores modernos y reales directamente desde colecciones CMS, algo que Webflow no soporta de forma nativa.
Enlaces Útiles
-
Swiper.js
https://swiperjs.com/ -
Documentación de Swiper (Navegación, Paginación, Puntos de Rotura)
https://swiperjs.com/swiper-api -
Webflow CMS
https://webflow.com/cms -
Webflow University
https://university.webflow.com/
Resultado Final
Ahora tienes:
- Un deslizador alimentado por CMS completamente responsive
- Interacciones de deslizar/drag
- Botones de navegación
- Puntos de paginación
- Puntos de rotura para móvil/tableta/escritorio
- Sin incrustaciones dentro del CMS
- Compatible con el nuevo Diseñador de Webflow 2025
Este método ha sido probado y funciona de forma confiable en múltiples proyectos.
Si lo deseas, también puedo proporcionarte:
Versión con reproducción automática
Versión con bucle infinito (con lógica de clonación de CMS)
Efecto Coverflow
Iconos personalizados para flechas
Soporte para múltiples deslizadores en una misma página