Como crear un carrusel de imágenes (o módulos) en Divi

Tutorial Divi. Crear un carrusel de imágenes (o módulos) en Divi. Introducción.
Hace ya un par de años hice un tutorial similar. Digamos que fue la versión 1.0. Estaba basado en un post de la página divisoup, especializada también en el tema Divi. Hoy haremos un carrusel de imágenes (o módulos) en Divi.
Digo que era la versión 1.0 porque el método, aunque efectivo, usaba código menos actual (obviamente) y el recorrido para conseguir el resultado era más engorroso que el que hoy vamos a ver.
En definitiva, hoy trataré de explicar un efecto similar pero mejorado tanto en el proceso como en la funcionalidad.
Esta vez vamos a usar la rejilla y las variables en css. Con el método rejilla (grid), evitamos el uso de columnas o propiedades float en el código. El uso de variables nos proporciona versatilidad y sencillez a la hora de modificar funcionalidades a nuestro carrusel. Cambiar velocidad, número de imágenes visibles, etc, será cuestión de segundos. Las variables, pues, nos permitirán modificar fácilmente valores sin tener que buscar entre un montón de líneas de código.
Igual que el tutorial antiguo, éste está basado también en el de Divisoup, esto es una interpretación que espero os haga más sencillo el aprendizaje.
Decía al principio que esta es una versión mejorada. ¿Que aporta de novedososo? Fundamentalmente dos cosas.
- Va a permitir integrar en el carrusel de Divi casi cualquier módulo (todos excepto los que usan el método de rejilla, como portfolio, galería, blog o tienda).
- Se añade de la opción de que el carrusel se pause cuando posamos el cursor sobre él (hover).
A continuación puedes ver cómo va a quedar nuestro carrusel una vez finalizado.




















Preparando nuestro carrusel Divi
Primero vamos a configurar nuestro contenedor, esto es, la fila que contendrá los módulos o imágenes. En este tutorial usaremos módulos tipo imagen, pero puedes experimentar con módulos tipo anuncio, cta, o el que necesites con las excepciones ya comentadas.
Por lo tanto, creamos una sección estándar, y añadimos una sola fila de una columna.
Abrimos los ajustes de la fila y, en la pestaña Diseño (1) configuramos de esta manera:
– Hacer que esta fila tenga anchura completa: si (2)
– Uso personalizado de Canal de Ancho: si (3)
– Espacio entre columnas: 1 (4)
A continuación puedes ver una captura.
Ahora, en la pestaña avanzado, asignamos a la fila la clase ds-carousel.
Añadiendo los módulos
Ahora, en tu fila agrega un nuevo módulo. Como decía, yo voy a usar el módulo de imagen para este tutorial, pero puedes usar cualquiera de los módulos que no usan el diseño de rejilla. Como hemos configurado esta fila para que tenga un margen de 1 (espacio entre columnas del canalón de ancho), no habrá espacio entre cada módulo en el carrusel. Para añadir un poco de «aire», introduce relleno personalizado izquierdo y derecho dentro del propio módulo. Con 30 píxeles va bien, pero cambia el valor si quieres a tus necesidades. A continuación, puedes realizar cualquier otro ajuste de estilo que desees.
Cuando hayas configurado tu módulo, duplícalo tantas veces como módulos quieres que aparezcan en tu carrusel. Aquí serán 8, así que mi fila se verá así:
Nota: Para hacerlo más rápido, he cambiado el nombre de cada módulo en la vista esquema (wireframe) del constructor visual. Ahí te permite cambiarlo directamente y ganar mucho tiempo. En el vídeo te lo explico.
Sustituye las imágenes o contenido
A continuación, accede a cada módulo y sustituye la imagen o el contenido que necesites si es un módulo distinto al de imagen. Al final debes tener 8 módulos con contenido distinto.
Cuando hayas terminado, duplica cada uno de tus módulos una vez, de modo que tengas dos conjuntos de módulos, todos dentro de la misma fila, como esto:
Al igual que al nombrar los módulos, lo haras más rápido si duplicas la fila y vas «moviendo cada módulo a continuación del primer bloque. En el vídeo lo verás más claro.
Como ves, el segundo conjunto de módulos duplicado deberá ser idéntico al primero, esto es lo que nos permite crear un desplazamiento continuo. Por lo tanto, si cambias algo en un módulo en el primer conjunto, asegúrate de hacer los mismos cambios en el módulo correspondiente en el segundo conjunto.
El código CSS
Cuando veas el código igual te sientes frustado. No te preocupes, funcionará. ¿Dónde pongo el código CSS? Pues puedes ponerlo en la hoja de estilos de tu tema hijo, en el panel CSS del tema o en el CSS de la página que es donde lo voy a poner yo.
Probablemente el editor te indicará que tienes errores ([Expected RBRACE] y algun otro). No hagas caso; simplemente es código nuevo y el editor de css aún no lo reconoce como válido. Pero comprobarás que funciona sin problemas.
Este es el código que debes poner:
/*-----------------------------------------------*/ /*-----Carrusel de imágenes (o módulos) en Divi----*/ /*-----------------------------------------------*/ /*Opciones del carrusel, ajusta testos valores segun necesites*/ :root { --ds-module-number: 16; /*Numero total de módulos 8+8=16*/ --ds-columns-desktop: 6; /*número de módulos que se verán a la vez en escritorio*/ --ds-columns-tablet: 4; /*número de módulos que se verán a la vez en tablet*/ --ds-columns-mobile: 2; /*número de módulos que se verán a la vez en moviles*/ --ds-speed-desktop: 30s; /*velocidad de animación en ordenadores (escritorio)*/ --ds-speed-tablet: 30s; /*velocidad de animación en tablets)*/ --ds-speed-mobile: 30s; /*velocidad de animación en móviles*/ } /**************************************************/ /*No es necesario editar nada debajo de esta línea */ /**************************************************/ /*Variables para escritorio*/ @media all and (min-width: 981px) { :root { --ds-column-width: auto; --ds-module-width: calc(100vw / var(--ds-columns-desktop)); --ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2)); --ds-scroll-speed: var(--ds-speed-desktop); } } /*Variables para tablets*/ @media all and (max-width: 980px) { :root { --ds-column-width: auto; --ds-module-width: calc(100vw / var(--ds-columns-tablet)); --ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2)); --ds-scroll-speed: var(--ds-speed-tablet); } } /*Variables para móvil*/ @media all and (max-width: 479px) { :root { --ds-module-width: calc(100vw / var(--ds-columns-mobile)); --ds-scroll-speed: var(--ds-speed-mobile); } } /*Ocultar el desbordamiento de fila*/ .ds-carousel { overflow: hidden; } /*Define la cuadrícula y aplica animación */ .ds-carousel .et_pb_column { display: grid; grid-template-columns: repeat(var(--ds-module-number), var(--ds-module-width)); width: var(--ds-column-width); -webkit-animation: scroll var(--ds-scroll-speed) linear infinite; animation: scroll var(--ds-scroll-speed) linear infinite; } /*Aplica el ancho del módulo */ .ds-carousel .et_pb_module { width: var(--ds-module-width) !important; } /*Define la animación*/ @-webkit-keyframes scroll { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2))); transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2))); } } @keyframes scroll { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2))); transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2))); } } /*Detener la animación on hover*/ .ds-carousel .et_pb_column:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } /*-----------------------------------------------*/ /*---Carrusel de imágenes (o módulos) en Divi--*/ /*-----------------------------------------------*/
Explicando el código
Si has copiado y pegado el CSS de arriba ya debería funcionar tu carrusel. Como extra, dividiremos el CSS en 5 bloques y te explicaré de forma básica lo que hace cada parte.
Bloque 1. Las variables
Nuestro primer bloque es donde establecemos variables para el contenido, el diseño y la velocidad de nuestro carrusel. El resto de nuestro CSS se referirá a estas variables y estos son los únicos valores que debes cambiar. En el vídeo puedes ver el efecto al cambiar estos valores.
/*Opciones del carrusel, ajusta estos valores según necesites*/ :root { --ds-module-number: 16; --ds-columns-desktop: 6; --ds-columns-tablet: 4; --ds-columns-mobile: 2; --ds-speed-desktop: 30s; --ds-speed-tablet: 30s; --ds-speed-mobile: 30s; }
Bloque 2. Comportamiento según dispositivo
Luego establecemos algunas variables específicas de cada dispositivo usando cálculos de las variables que establecimos en nuestro primer bloque. Esto nos permite ajustar la cantidad de elementos que se muestran en la pantalla y la velocidad de nuestra animación para ordenadores de escritorio, tabletas y dispositivos móviles.
/*Variables para escritorio*/ @media all and (min-width: 981px) { :root { --ds-column-width: auto; --ds-module-width: calc(100vw / var(--ds-columns-desktop)); --ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2)); --ds-scroll-speed: var(--ds-speed-desktop); } } /*Variables para tablets*/ @media all and (max-width: 980px) { :root { --ds-column-width: auto; --ds-module-width: calc(100vw / var(--ds-columns-tablet)); --ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2)); --ds-scroll-speed: var(--ds-speed-tablet); } } /*Variables para móvil*/ @media all and (max-width: 479px) { :root { --ds-module-width: calc(100vw / var(--ds-columns-mobile)); --ds-scroll-speed: var(--ds-speed-mobile); } }
Bloque 3. Las variables
A continuación, ocultamos cualquier desbordamiento de nuestro carrusel para evitar una barra de desplazamiento horizontal. Luego configuramos el contenedor para que se muestre como una cuadrícula, lo que nos permite definir el número de columnas al extraer los valores de las variables que configuramos en el primer y el segundo bloque. También definimos el ancho de cada módulo a partir de nuestras variables.
/*Ocultar el desbordamiento de fila*/ .ds-carousel { overflow: hidden; } /*Define la cuadrícula y aplica animación */ .ds-carousel .et_pb_column { display: grid; grid-template-columns: repeat(var(--ds-module-number), var(--ds-module-width)); width: var(--ds-column-width); -webkit-animation: scroll var(--ds-scroll-speed) linear infinite; animation: scroll var(--ds-scroll-speed) linear infinite; } /*Aplica el ancho del módulo */ .ds-carousel .et_pb_module { width: var(--ds-module-width) !important; }
Bloque 4. La animación
Esta es nuestra animación real, movemos el carrusel desde su posición inicial hasta su posición final en función de los valores de las variables que establecimos inicialmente, y debido a que usamos «infinito» en nuestra configuración de animación anterior, continuará indefinidamente.
/*Define la animación*/ @-webkit-keyframes scroll { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2))); transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2))); } } @keyframes scroll { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2))); transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2))); } }
Bloque 5. Pausa on hover del carrusel Divi
Y finalmente, (esto es opcional), pausamos la animación cuando el usuario se desplaza sobre nuestro carrusel.
/*Detener la animación on hover*/ .ds-carousel .et_pb_column:hover { -webkit-animation-play-state: paused; animation-play-state: paused; }
Conclusiones
El CSS proporcionado es para un carrusel de 8 artículos. 6 mostrados en el escritorio, 4 en la tableta y 2 en el móvil, todos con una velocidad de 30 segundos, este es el tiempo que tomarán nuestros 8 módulos para moverse completamente por la pantalla.
Cuando configuramos nuestro carrusel, creamos nuestros módulos, y luego los duplicamos una vez, por lo que con 8 módulos únicos, terminamos con un total de 16.
16 es el número que ingresa para la variable –ds-module-number. Si necesitamos más elementos en nuestro carrusel, cambiar velocidad, etc, solo tenemos que cambiar los valores de las variables. Si quisiéramos 10 imágenes, la variable —ds-module-number debería ser 20 (10+10).
Si quieres comprobar el tutorial y aprender algún truquillo extra, puedes ver el video que te he preparado.
Hola Pedro,
Excelente tu post.
De hecho por ahí vi en estos días el plugin Supreme Divi que tiene una función de carrusel muy parecida, pero esa función es de pago.
Así que genial que nos enseñes como hacerlo sin plugins (y mejor: sin gastar)
Creo que lo implementaré en una de las páginas que estoy diseñando.
Un abrazo, amigo.
Hola Pedro:
He seguido tus pasos y he creado un carrusel de imágenes y se visualiza bien en los navegadores del pc o mac que tengo, pero mi problema es que el cliente no lo ve bien ya que trbajo con mac y no lo tiene actualizado…salen las imágenes en fila en lugar de visualizar el carrusel.
¿Sabrias como solucionar este problema, u otro método para que se puedan visualizar bien en dichos navegadores?
Gracias y saludos,
Carmen
Hola, Carmen
Efectivamente el código CSS usado contiene programación «demasiado» actual para ciertos navegadores como internet explorer. Puedes usar este otro tutorial para crear el efecto. https://aulamedia.net/demo-carrusel-logos/. Comprueba antes que funciona ok en el navegador que antes no veías correctamente y accede entonces al tutorial pulsando el botón.
Ya me dices si te funcionó.
Un saludo
Muchísimas gracias por tu Carrusel, me funciona increíble. No obstante, lo que busco exactamente es algo similar a lo que aparece en esta web que te adjunto: crees que podrá realizarse algo similar de esta manera? ¡Gracias de antemano! Un saludo
https://www.fibaro.com/cl/smart-home-in-use/
EXCELENTE. GRACIAS POR TU CONTENIDO, ME HA SALVADO LA VIDA.
Hola Pedro, muchas gracias por este tutorial,
Me gustaría que me ayudaras con lo siguiente.
si deseamos que el carrusel pase al hacer click en los extremos ¿cómo sera la programación?
Gracias por tus comentarios
Muchas gracias por este tutorial realmente esta muy completo y fácil de implementar.
Me gustaría poder hacer que el carrusel se activara al hacer click en los extremos, esto cómo se puede lograr.
Gracias
Muchas gracias, Enrique
Hola,
Muy bueno el tutorial, pero al final del todo se queda un espacio en blanco hasta que vuelve arrancar con la primera foto, ¿ como puedo quitar ese espacio en blanco?
Todo muy bien pero quisiera saber esto también
Me ha encantado, solo un pequeño detalle ¿cómo se le puede poner las flechas a los lados para que lo puedan movilizar manualmente?… Muchas gracias.
Hola master Aulamedia, ajustando a mis necesidades su hermoso código logré mi objetivo, salvo que la primera vez que corren las imágenes, estas tardan en cargarse, dejando espacios en blanco como puede usted ver en https://imagensports.com.mx/milpa-alta
Una vez que han corrido todas ya no hay problema cuando en adelante se repite la secuencia.
Le estaré muy agradecido si pudiera orientarme al respecto.
Saludos!!