El editor de WordPress no tiene bloque de carrusel o slider de imágenes ¡lo necesito! ¿qué hago?

Entre los muchos bloques nativos del editor de WordPress a nadie se le ha ocurrido añadir uno que permita mostrar un carrusel de imágenes, no existe. Y no es que no me conozca bien el editor de bloques Gutenberg de WordPress, lo llevo usando (y criticando) desde que estaba en pañales (Alpha se dice en friki). Y no, no es que no lo haya buscado, es que no existe…

¡Que sí, que puedes instalar bloques desde el mismo editor! pero ¿un bloque de carrusel o slider?

Total, es una cosa que NADIE USA, no como el bloque de verso o el de notas al pie, que son tendencia a diario en los ambientes :/

¿En serio?, ¿no?. Vale que los desarrolladores – a quienes adoro – de WordPress y su editor no son escritores, ni siquiera diseñadores, y no tienen porqué saber qué bloques de contenido necesitamos los creadores de contenidos, pero ¿por qué no preguntáis en vez de dedicar vuestro excelso conocimiento a cosas que no usa nadie en vez de emplear ese don que tenéis a algo realmente útil?

No conozco a nadie que haga webs que no haya mostrado nunca un carrusel de imágenes en una web, da igual la temática e incluso el tipo de web.

Y no me refiero solo a cuestiones de diseño, sino a pequeñas cosas, como mostrar fotos de un evento en una noticia, o las capturas de una salida al campo, imágenes de proyectos en un porfolio, etc., etc., etc.

Son cientos los motivos y situaciones en que un creador de contenido va a necesitar mostrar un carrusel de imágenes en su web, así que si necesitas mostrar uno vas a tener que, como yo, usar un bloque que tendrás que instalar adicionalmente a los ya existentes.

Nota: sé que hay colecciones de bloques estupendas que tienen este tipo de bloques pero voy a recomendarte únicamente bloques independientes, pues me parece una burrada instalar una colección completa de bloques solo para un bloque. ¿Y si mañana necesitas otro bloque que no está en la colección que instalaste, qué haces, instalas otra colección solo para un bloque? Ojo, que luego hablamos del efecto lock-in de los temas, y con los bloques nos podemos también meter en un círculo cerrado.

Dicho lo anterior, queja planteada, y expuesta la aclaración, vamos a ver qué bloques hay por ahí que podamos instalar, gratis, y que añadan al editor la funcionalidad de carrusel de imágenes o slider de fotos, como lo quieras llamar.

Block Gallery to Carousel Lightbox

Empezaré por este bloque, pues me parece el enfoque más ligero, ya que se trata de aprovechar el bloque de galería nativo, y añadirle la funcionalidad de carrusel, y además con efecto de caja de luz.

Su uso es bastante sencillo, aunque mejorable, el proceso sería el siguiente:

1. Creas tu galería con el bloque nativo de WordPress y le añades las imágenes que quieras.
2. Seleccionas la galería y le añades enlace al archivo de medios.
3. En la sección de ajustes avanzados del bloque de galería añades la clase CSS atakanau_bgtcl_auto_container, que es lo que completa el proceso.

Debes tener claro que no vale con el primer paso, sin los pasos 2 y 3 tu galería se comportará como hace habitualmente: sosa y sin gracia.

Me ha gustado de este bloque que aprovecha la galería nativa de WordPress, pero no me convence que haya que añadirle manualmente la clase CSS, ni tampoco que no tenga ajustes de aspecto, siendo que el carrusel es de fondo negro sí o sí, algo que no encajará en ciertos diseños y plantillas.

La idea es estupenda, la ejecución mejorable.

Carousel Slider Block for Gutenberg

Este bloque sirve para añadir un carrusel de fotos, pero no solo eso, pues en realidad puedes añadir a tu slider cualquier otro bloque, no tiene ningún límite en este sentido.

Sus virtudes son…

• Permite añadir diapositivas ilimitadas al carrusel
• Permite añadir cualquier bloque al carrusel
• Puedes hacer vista previa del carrusel en el mismo editor

Además, tiene un montón de ajustes que puedes hacer a tus sliders:

• Número de diapositivas por pantalla
• Número de diapositivas que hacen scroll al mismo tiempo
• Velocidad de desplazamiento del slider
• Relleno, o no, de las diapositivas
• Flechas de anterior/siguiente
• Navegación por puntos
• Bucle de diapositivas infinito
• Reproducción automática
• Ajustes de adaptabilidad: diapositivas a mostrar y hacer scroll en un tamaño de pantalla dado

Su uso no puede ser más sencillo:

1. Añades el bloque de carrusel de diapositivas (así se llama).
2. Añades una diapositiva.
3. Dentro de la diapositiva añades CUALQUIER bloque.
4. Configuras el carrusel.

Aquí tienes todo el proceso en una sola captura…

Luego, en la web, todo funciona como es de esperar…

Lo que más me gusta de este bloque de carrusel es que su planteamiento y uso es totalmente intuitivo, comprendes la lógica de su funcionamiento al instante. Bueno, eso y que no se limita solo a imágenes, sino que puedes añadir cualquier cosa (bloque) a una diapositiva, lo que lo hace enormemente versátil y útil para montones de situaciones.

En cuanto a las «pegas», alguna tiene, como por ejemplo que no ofrezca la posibilidad de en sus ajustes añadir un efecto de caja de luz para las imágenes, aunque es fácilmente subsanable añadiéndolo en cada imagen, usando la funcionalidad nativa del editor. Pero no es perfecto, porque si abres la caja de luz de una imagen, no puedes seguir navegando con el carrusel, van por separado.

También le falta, a mi gusto, un ajuste desde el que igualar los tamaños de las capturas en los carruseles, pues solo puedes manipular tamaños imagen a imagen, y nunca encajan perfecto.

Por lo demás, un gran bloque, al que debes darle una oportunidad, pues seguro que te saca de más de un apuro.

Splide Carousel Block

Este es muy parecido al anterior, y antes de elegir uno de ellos deberías probar también el otro, porque son alternativos, muy similares, de hecho su filosofía de funcionamiento y posibilidades son prácticamente los mismos.

Por resumir, con Splide tienes montones de opciones:

• Navegación con flechas
• Paginación de puntos
• Reproducción automática
• Transiciones de deslizamiento y desvanecimiento
• Bucle infinito
• API para controlar el carrusel mediante JavaScript
• Ancho/alto de diapositiva fijos
• Ancho/altura de diapositiva variable
• Número de diapositivas por página
• Espaciado entre diapositivas
• Admite vídeos
• Desplazamiento automático
• Navegación hash
• Carga diferida
• Compatible con FSE (edición completa del sitio)
• Totalmente accesible
• Compatible con RTL
• Adaptable a todo tipo de dispositivos.
• No hay problemas con Google Lighthouse
• Ligero

Pero, además, como está basado en splide.js, puedes hacer montones de personalizaciones más.

Su modo de uso es igual que el del anterior, o sea:

1. Añades un carrusel, en este caso un Splide.
2. Añades diapositivas vacías y dentro de cada una el bloque que quieras.
3. Personalizas el carrusel a tu gusto y necesidades.

La visualización es fantástica, más bonita si me apuras que con el otro bloque de carrusel de diapositivas, pues añade una bonita sombra a las diapositivas y un escalado de tamaños que no es perfecto pero queda razonablemente bien a simple vista.

¿Tiene algún defectillo?, pues curiosamente los mismos que con el otro plugin:

• No tiene efecto de caja de luz propio aplicable a todo el carrusel.
• No tiene ajustes globales de ajuste de tamaño de las diapositivas.

Lo primero se arregla igual que antes, añadiendo el efecto nativo del editor de WordPress. Lo segundo, con un poco de maña, o ya con JSON, recuerda que estás usando splide.js.

Casi, casi, perfecto.

B Carousel Block

Con este plugin estoy a punto de saltarme mis propias normas, de que sea un bloque, porque no es bloque, aunque es un bloque, pero también puedes crear carruseles desde fuera del editor, aunque en realidad estarás creando bloques. Bueno, que me lío 😀

A lo que me refiero es a que este plugin sirve para crear carruseles de imágenes, exclusivamente, que a fin de cuentas es de lo que se trata, y solo tienes que buscarlo en el editor de bloques y ahí está: Carousel.

Puedes insertar el carrusel por defecto a un clic, o elegir alguno de los 5 diseños predefinidos haciendo clic justo debajo, y lo que te vas a dar cuenta enseguida es que las opciones del bloque de carrusel son masivas, enormes, y sí, algunas son de la versión Pro, pero solo con las gratis ya tienes una burrada de ajustes con los que jugar y personalizar de locura tus sliders.

El modo de trabajo con este carrusel es algo distinto, pues se añaden, copian o quitan las diapositivas desde los ajustes del bloque, en la pestaña general, y solo admite imágenes.

Pero su uso básico, aunque el que buscábamos, lo compensa con el montón de ajustes disponibles, más que de sobra, para crear carruseles o sliders de imágenes totalmente geniales.

Tienes opciones para todo, reproducción automática, pausa, espaciados, tamaños automáticos (por fin), efectos de todo tipo,  pero seguimos sin poder tener una caja de luz, un lightbox, unificado, y en este caso solo podemos añadir un enlace, manualmente, pues la opción la tiene, pero de pago, una pena, pues solo por eso pierde muchos puntos, casi era mejor poder aprovechar al menos la funcionalidad nativa del editor, pero en este caso al gestionarse las imágenes fuera del mismo editor, pues no está disponible.

De todos modos, por sus enormes posibilidades de personalización, si no necesitas el efecto de caja de luz, ofrece otras cosas que no tienen otros plugins, como un diseño precioso de los carruseles, más efectos, y otras opciones, que igual te enamoran.

Y ya, que seguro que hay muchos más bloques de carrusel por ahí pero esta muestra me parece de lo más relevante.

¿Cuál es el mejor?

Todos y ninguno, depende de lo que necesites, pruébalos, que son gratis, y el resto los borras ¿no?

Para mi, a pesar de no tener incluido el lightbox en sus opciones, me gusta mucho lo sencillo que es de usar Carousel Slider Block, el segundo de esta comparativa, me sobra y me basta para casi cualquier situación, y el hecho de poder usarlo para más cosas que para imágenes me parece genial.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!