web_carousel Shortcode
El shortcode web_carousel renderiza el componente de carrusel.
Los atributos que aparecen a continuación coinciden con los controles actuales del Page Builder y con la salida pública. Utiliza la sintaxis en bruto solo para contenido revisado que no pueda mantenerse mediante los controles visuales.
Shortcodes secundarios permitidos: web_carousel_content.
Uso
[web_carousel]
Content
[/web_carousel]Atributos
| Atributo | Valor predeterminado | Valores aceptados | Propósito |
|---|---|---|---|
web_carousel_style |
style_2 |
Cadena de texto, salvo que se indique lo contrario | Selecciona el estilo del carrusel. |
web_carousel_elements_align |
center |
center, left |
Controla la alineación de los elementos del carrusel. Disponible cuando web_carousel_style es style_2. |
web_carousel_pause_autoplay_on_hover |
— | yes |
Pausa el autoplay temporizado o el desplazamiento continuo al pasar el cursor por encima. Déjalo vacío para mantener el movimiento. |
web_carousel_arrows |
— | yes |
Si está marcado, las flechas serán visibles. |
web_carousel_arrows_style |
default |
default, over_content, next_to_content, below_content |
Controla el estilo de las flechas. Disponible cuando web_carousel_arrows es yes. |
web_carousel_dots |
— | yes |
Si está marcado, los puntos serán visibles. Disponible cuando web_carousel_style es style_2. |
web_carousel_opacity |
— | yes |
Si está marcado, las diapositivas no principales tendrán menos opacidad. Disponible cuando web_carousel_style es style_2. |
web_carousel_continuous_scroll |
— | yes |
Habilita el movimiento continuo con bucle automático en lugar del autoplay temporizado. |
web_carousel_scroll_direction |
left |
left, right |
Dirección del movimiento físico cuando el desplazamiento continuo está habilitado. |
web_carousel_scroll_speed |
60 |
Número de 1 a 300 |
Velocidad del movimiento continuo en píxeles por segundo. |
web_carousel_yes_autoplay |
— | yes |
Si está marcado, el autoplay estará habilitado. |
web_carousel_reverse_autoplay |
— | yes |
Invierte el movimiento automático cuando el autoplay está habilitado. El comportamiento de pausa nativo sigue aplicándose. |
web_carousel_autoplay_speed |
2000 |
Número | Selecciona la velocidad del carrusel. Disponible cuando web_carousel_yes_autoplay es yes. |
web_carousel_cells_loop |
— | yes |
Si está marcado, se permitirá el bucle infinito. |
web_carousel_adaptive_height |
— | yes |
Si está marcado, la altura del carrusel se adaptará a cada celda. |
web_carousel_draggable |
yes |
yes |
Habilita el arrastre entre diapositivas. |
web_carousel_hash |
— | yes |
Habilita la opción hash para enlazar directamente a un elemento del carrusel. |
web_carousel_free_scroll |
— | yes |
Permite que el contenido se desplace y se deslice libremente sin alinear las celdas a una posición final. |
web_carousel_columns |
web-carousel-x2 |
web-carousel-x2, web-carousel-x3, web-carousel-x4, web-carousel-x5 |
Selecciona las columnas del carrusel. Disponible cuando web_carousel_style es style_2. |
device_visibility |
— | Cadena de texto, salvo que se indique lo contrario | Aplica la regla de visibilidad responsive seleccionada. |
el_id |
— | ID HTML único y válido | Introduce el ID del elemento (Nota: asegúrate de que sea único y válido según la especificación w3c). |
el_class |
— | Cadena de texto, salvo que se indique lo contrario | Si deseas aplicar un estilo diferente a un elemento de contenido concreto, utiliza este campo para añadir un nombre de clase y haz referencia a él en tu archivo css. |
web_carousel_slide_numbers |
— | yes |
Muestra la diapositiva actual y el recuento total dentro del carrusel que lo contiene, en los tres estilos. |
Contenido incluido
El contenido entre las etiquetas de apertura y cierre se procesa como contenido de shortcode de WordPress. Mantén la estructura de padre/hijo que muestra el constructor visual para que los componentes anidados reciban el contexto que esperan.
Desplazamiento continuo
El desplazamiento continuo mueve el contenido a una velocidad constante sin esperar entre diapositivas. Está disponible en Carousel y Carousel feed, en los tres estilos. El shortcode Slider y los controles del carrusel de Gutenberg no exponen esta opción.
- Edita el elemento en el Page Builder. Para Carousel feed, abre Carousel options.
- Habilita Continuous scroll.
- Elige Left o Right en Scroll direction y, a continuación, establece Continuous scroll speed en píxeles por segundo. Los valores más altos se mueven más rápido.
- Habilita Pause AutoPlay on hover para pausar mientras el puntero está sobre el carrusel, o déjalo sin marcar para mantener el movimiento.
- Guarda la página y comprueba el frontend.
Este modo habilita automáticamente el bucle y el desplazamiento libre. Tiene prioridad sobre Autoplay, Autoplay speed, Reverse autoplay y el ajuste manual de bucle; estos ajustes siguen aplicándose cuando el desplazamiento continuo está deshabilitado. El arrastre y la navegación siguen disponibles, y el movimiento continuo se reanuda una vez que el movimiento se estabiliza. La navegación por teclado y los enlaces o controles enfocados pausan el movimiento continuo; abandona el carrusel para reanudarlo. Los visitantes que solicitan movimiento reducido reciben un carrusel estático con navegación manual. Las pestañas ocultas y los carruseles fuera de pantalla se pausan hasta que vuelven a ser visibles. Un único elemento permanece estático; usa suficientes elementos para llenar el área de visualización y obtener una franja continua.
[web_carousel web_carousel_continuous_scroll="yes" web_carousel_scroll_direction="right" web_carousel_scroll_speed="60" web_carousel_pause_autoplay_on_hover="yes"]
[web_carousel_content title="First"]First item[/web_carousel_content]
[web_carousel_content title="Second"]Second item[/web_carousel_content]
[web_carousel_content title="Third"]Third item[/web_carousel_content]
[/web_carousel]El contenedor del carrusel expone data-continuous-scroll="true", data-scroll-direction="left|right" y data-scroll-speed="60". La pausa al pasar el cursor reutiliza data-pause-autoplay-on-hover="true"; omitirlo deshabilita la pausa al pasar el cursor. Estos atributos configuran el tiempo de ejecución existente del carrusel.
Confirma la dirección en el frontend, pasa el cursor con el ajuste de pausa habilitado y deshabilitado, arrastra a otro elemento y verifica que el movimiento se reanuda sin un salto en el límite del bucle. Si permanece inmóvil, comprueba las preferencias de movimiento reducido, el foco del teclado, la visibilidad y el número de elementos.
Accesibilidad
Cada celda visible del carrusel permanece disponible para las tecnologías de asistencia y la navegación por teclado, incluidos los diseños que muestran varias celdas simultáneamente. Las celdas fuera del área de visualización del carrusel se ocultan del árbol de accesibilidad y se inutilizan hasta que entran en la vista.
Las flechas personalizadas admiten Tab, Enter y Espacio. La navegación manual detiene el autoplay temporizado. Los carruseles anidados conservan sus propios controles y contadores. Utiliza IDs únicos para el elemento padre y las diapositivas; solo un carrusel debe controlar el hash de la URL.
Para la creación con el editor de bloques, consulta Build a content carousel in Gutenberg.
Verificación
Las imágenes pueden utilizar carga diferida (lazy loading). Desplázate hasta el carrusel y confirma que su altura se ajusta cuando aparecen las imágenes; a continuación, comprueba que cada diapositiva permanece visible durante la reproducción.
Con el desplazamiento continuo deshabilitado, cuando el autoplay está habilitado y el bucle está deshabilitado, la reproducción se detiene en la última diapositiva, o en la primera diapositiva en dirección inversa. Un carrusel inverso que comienza en la primera diapositiva ya está en su punto de parada. Habilita el bucle para una reproducción continua. Las pausas por visibilidad al pasar el cursor y por pestaña no reinician una ejecución completada.
Rellena web_carousel con web_carousel_content y confirma que cada hijo sigue siendo accesible en el orden previsto. Presta especial atención a web_carousel_style y web_carousel_elements_align.