Descripción

Un carrusel de diapositivas adaptable para el editor Gutenberg que permite añadir cualquier bloque a las diapositivas.

🚀 Carousel Slider Version 2 is here! Now powered by Swiper.js for a smoother, faster, and more modern experience. See below for update instructions.

Características

Añade diapositivas ilimitadas
Añadie cualquier bloque a las diapositivas
Vista previa del carrusel en el editor
Adaptable y compatible con toques

Ajustes

Diapositivas por vista
Diapositivas que hacen scroll al mismo tiempo
Velocidad de desplazamiento
Relleno de diapositivas
Flechas de anterior/siguiente
Navegación por puntos
Blucle de diapositivas infinito
Reproducción automática
Ajustes de adaptabilidad: diapositivas a mostrar y hacer scroll en un tamaño de pantalla dado
RTL

Requisitos

Recomendamos PHP 5.6+, WordPress 5.8+, con Gutenberg activo.

Documentación

Selecciona el bloque de carrusel de diapositivas desde la categoría de diseño. Haz clic en el botón + situado al final del carrusel para añadir diapositivas. Añade cualquier bloque dentro de las diapositivas. Usa la barra de desplazamiento horizontal para previsualizar las diapositivas en el editor.

Puedes reordenar las diapositivas usando los botones de flecha izquierda y derecha de la barra de herramientas.

Para quitar una diapositiva selecciona la diapositiva y haz clic en los tres puntos de la derecha sobre la misma. Haz clic en la opción de eliminar esa diapositiva.

Haz clic en el bloque de carrusel (el bloque que anida todas las diapositivas) para mostrar los ajustes del carrusel.

Carousel Slider Version 2

Carousel Slider v2 now uses Swiper.js instead of Slick. It’s more modern, better supported, and works smoother across devices.

Upgrading from Legacy Carousel

Existing legacy (v1) Carousel Slider blocks will still work. You can re-enable them in the admin settings under Settings Carousel Slider.
To upgrade, click on a legacy Carousel Slider block in the editor. In the block’s toolbar (the floating bar that appears above the block), click the block icon (first button on the left). From the dropdown, choose «Transform to Carousel Slider v2». Your existing carousel settings will be preserved, but note that the design and HTML markup will change.
Legacy styles will not apply to v2. You may need to adjust custom CSS.

Optional: Re-enable Legacy Blocks

You can show/hide legacy blocks from the block inserter and disable v2 upgrade notices via Settings Carousel Slider in the admin menu.

Note: Legacy blocks will continue to function, but are no longer supported. It is highly recommended to upgrade to v2 for continued improvements and compatibility.

Customizing v2 Styles

Carousel Slider v2 supports custom styling via CSS variables:

Navigation

--wp--custom--carousel-block--navigation-size: Arrow size
--wp--custom--carousel-block--navigation-sides-offset: Distance from edge
--wp--custom--carousel-block--navigation-color: Arrow color
--wp--custom--carousel-block--navigation-fullwidth-color: Arrow color when the carousel is full width

Pagination (dots)

--wp--custom--carousel-block--pagination-top: Top offset for pagination
--wp--custom--carousel-block--pagination-bullet-size: Dot size
--wp--custom--carousel-block--pagination-bullet-color: Dot color (inactive)
--wp--custom--carousel-block--pagination-bullet-active-color: Dot color (active)
--wp--custom--carousel-block--pagination-bullet-opacity: Dot opacity (inactive)
--wp--custom--carousel-block--pagination-bullet-active-opacity: Dot opacity (active)
--wp--custom--carousel-block--pagination-bullet-horizontal-gap: Horizontal spacing between dots
--wp--custom--carousel-block--pagination-bullet-vertical-gap: Vertical spacing between dots

Block spacing

--wp--custom--carousel-block--image-margin-top: Top spacing for image blocks
--wp--custom--carousel-block--image-margin-bottom: Bottom spacing for image blocks
--wp--custom--carousel-block--cover-margin-top: Top spacing for cover blocks
--wp--custom--carousel-block--cover-margin-bottom: Bottom spacing for cover blocks

Note: The CSS variables use the WordPress --wp--custom-- prefix, allowing you to override them in your theme’s theme.json for site-wide styling.

Capturas

Diapositivas del carrusel
Añade cualquier bloque a las diapositivas del carrusel
Ajustes del carrusel

Bloques

Este plugin proporciona 4 bloques.

Carousel Slider Display a carousel with any blocks in the slides.
Carousel Slider v2 Display a carousel with any blocks in the slides.
Slide A single slide within the carousel.
Slide A single slide within the carousel.

Instalación

Desde tu escritorio de WordPress, ve a Plugins > Añadir nuevo.
Busca Carousel Slider Block en la caja Buscar plugins.
Haz clic en Instalar ahora para instalar el plugin Carousel Slider Block.
Haz clic en Activar para activar el plugin.
El bloque de carrusel de diapositivas se añadirá al grupo de bloques de diseño en el editor.

Si aún necesitas ayuda, visita Codex de WordPress

FAQ

¿Qué es Gutenberg?: Gutenberg es el nombre del nuevo editor basado en bloques introducido en WordPress 5. Gutenberg facilita crewar contenido dentro del editor usando bloques.
¿Cómo añado un carrusel a WordPress?: Seleciona el bloque de carrusel de diapositivas desde la categoría de diseño.
¿Cómo añado una diapositiva a WordPress?: Selecciona el bloque de carrusel de diapositivas. Haz clic en el botón + para añadir diapositivas al carrusel.

Reseñas

efficiondave 3 de mayo de 2025

A great and simple plug-in. Exactly what I wanted.

BobRebus 24 de marzo de 2025

Does what it says. Simple and practical, easy to use. Thank you for creating this!

samuele99 14 de marzo de 2025

Incredible flexibility, it integrates perfectly into the current Gutenberg blocks pool for its functionality and layout. I noticed that the support is somewhat missing, probably because the developer is alone in this. It would be great if the community could help maintaining this so useful piece of code for as long as possible.

freelancesgroup 10 de febrero de 2025

Very easy to use and works very well

petertau 12 de diciembre de 2024

Works like a charm, simple or complex it is up to you.

skiwhitefish 4 de noviembre de 2024 1 respuesta

Updater beware. 1.0.15 totally broke my slider layout. They just all load vertically on top of each other now. Trying to diagnose/revert, but worth knowing in case it happens to you also. Update: Excellent customer service. Plugin has been fixed. Thank you.

Leer todas las 46 reseñas

Colaboradores y desarrolladores

«Carousel Slider Block for Gutenberg» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Virgildia

«Carousel Slider Block for Gutenberg» está traducido en 11 idiomas. Gracias a los traductores por sus contribuciones.

Traduce «Carousel Slider Block for Gutenberg» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

1.0.0

Primera versión del plugin.

1.0.1

Corregido el problema de «lodash».

1.0.2

Actualización para la última versión de WP Gutenberg. Corregido el editor de CSS.

1.0.3

Añadido los ajustes de la reproducción automática.

1.0.4

Experiencia de usuario mejorada mediante el uso de controles de bloques internos. Añadida la opción RTL. Eliminada la opción de relleno. Actualizado el icono de bloque diapositiva.

1.0.5

Se añadió «block.json». Diseño de bloque de carrusel mejorado en el editor. Icono de bloque de diapositiva actualizado. Probado para WordPress 5.9.

1.0.6

Se eliminó el problema de CSS con margen de bloque en las diapositivas.
Se cambió el estilo del botón «Añadir diapositiva».

1.0.7

Añadido un conjunto adaptable para que las diapositivas se desplacen a la vez.

1.0.8

Pequeñas mejoras de CSS en el editor. Se actualizó el uso de la hoja de estilos CSS. Probado en WordPress 6.0.

1.0.9

Corregido el mensaje de error en la pantalla del editor de widgets. Probado en WordPress 6.3.1.

1.0.10

Corregido el error de «lodash» con la última actualización de WordPress 6.4.

1.0.11

Corregido el problema de diseño en filas.
Código de reprogramación.

1.0.12

Añadida la dependencia de etiquetas.

1.0.13

Se revirtió Slick init a una solución funcional, fuera del proceso de construcción del bloque WP.

1.0.14

Actualiza las CSS para centrar bloques de imágenes.

1.0.15

Button block appender fix.

1.0.16

Fix slider init.

2.0.0

Introduced Carousel Slider v2 built on Swiper.js
Legacy blocks are still supported but can be upgraded to v2 via block transforms
Added settings to hide legacy blocks and legacy upgrade notices

2.0.1

Changed legacy block setting to «Show legacy blocks», disabled by default.
CSS update for pagination margin.