web_slider Shortcode
El shortcode web_slider renderiza el componente slider.
En Gutenberg, usa Slider and Slide para obtener la composición editable equivalente. Los shortcodes existentes siguen renderizándose cuando la interfaz Legacy Page Builder está desactivada.
Los atributos siguientes coinciden con los controles actuales del Page Builder y con el resultado público. Usa la sintaxis en crudo solo para contenido revisado que no pueda mantenerse mediante los controles visuales.
Shortcodes hijos permitidos: web_slide.
Uso
[web_slider]
Content
[/web_slider]Atributos
| Atributo | Valor predeterminado | Valores aceptados | Propósito |
|---|---|---|---|
slider_content_width |
— | container, full_width |
Selecciona el ancho del contenido de la diapositiva. |
slider_height |
slider_height_same |
slider_height_specific, slider_height_same, slider_height_fit, slider_height_viewport |
Selecciona la altura del slider. |
slider_height_in_pixels |
— | 1–10000 | Especifica la altura del slider en píxeles, solo cuando slider_height es slider_height_specific. Los valores que falten o no sean válidos usan 500px. |
slider_autoplay |
— | yes |
Si se marca, las diapositivas se moverán automáticamente. |
slider_random_mode |
— | yes |
Muestra las diapositivas en un orden distinto cada vez que se carga la página. |
slider_pause_time |
1000 |
500–20000 | Especifica la pausa en milisegundos. Se aplica cuando slider_autoplay es yes. |
transition_type |
slide_transition |
slide_transition, fade_transition |
Elige si deslizar o fundir entre diapositivas. |
slider_animation_speed |
0.1 |
0.01–0.1 | Especifica la velocidad del movimiento de la diapositiva. Un valor más bajo significa menor velocidad. Se aplica a slide_transition. |
slider_hide_arrows |
— | yes |
Si se marca, las flechas no serán visibles. |
slider_hide_dots |
— | yes |
Si se marca, los puntos no serán visibles. |
slider_show_numbers |
— | yes |
Controla la activación de los números de diapositiva. |
slider_cells_loop |
— | yes |
Si se marca, se permitirá el bucle infinito. |
slider_cells_draggable |
yes |
yes |
Permite arrastrar entre diapositivas. |
slider_pause_on_hover |
yes |
yes |
Si se marca, el slider se pausará cuando el ratón esté encima. |
device_visibility |
— | Cadena salvo que se indique lo contrario | Aplica la regla de visibilidad responsive seleccionada. |
el_id |
— | Identificador HTML único 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 salvo que se indique lo contrario | Si quieres dar estilo a un elemento de contenido concreto de forma distinta, usa este campo para añadir un nombre de clase y luego haz referencia a él en tu archivo CSS. |
Contenido incluido
El contenido entre las etiquetas de apertura y cierre se procesa como contenido de shortcode de WordPress. Mantén la estructura padre/hijo que muestra el constructor visual para que los componentes anidados reciban el contexto que esperan.
Con slider_height="slider_height_viewport", cada diapositiva y su fila de contenido inmediata llenan la altura del área de visualización del slider. Con slider_height="slider_height_specific", llenan la altura establecida por slider_height_in_pixels. Un carrusel colocado dentro de una diapositiva conserva sus propias dimensiones y modo de altura.
Verificación
El orden aleatorio se aplica en el navegador en cada visita, incluidas las páginas almacenadas en caché. Solo se barajan las diapositivas propias del elemento padre; los carruseles anidados conservan su contenido y sus contadores. Los números de diapositiva pertenecen a su propio elemento padre. Los sliders vacíos no muestran controles públicos tras la inicialización.
Los números de diapositiva también funcionan con el marcado del shortcode anterior conservado en cachés estáticas de HTML de la página.
Para el área de visualización o una altura específica, comprueba que el fondo de la fila de cada diapositiva llene el slider de arriba a abajo. Redimensiona el navegador y repite la comprobación en una pantalla estrecha. Si una diapositiva contiene otro carrusel, confirma que el carrusel anidado conserva su propia altura de contenido y anchos de columna.
Las imágenes pueden usar carga diferida. Desplázate hasta el slider y confirma que su altura se ajusta cuando aparecen las imágenes, y luego comprueba que cada diapositiva siga siendo visible durante la reproducción.
Con Autoplay activado y Loop slider cells? desactivado, el slider avanza hasta la última diapositiva y se detiene ahí. Activa el bucle para que se repita de forma continua. Esto se aplica tanto a las transiciones de deslizamiento como a las de fundido. Al pasar el ratón por encima se pausa la reproducción cuando Pause slider on hover está activado; salir del slider no reanuda la reproducción una vez que ha llegado al final. La navegación manual sigue disponible y detiene la reproducción automática.
Para comprobar este comportamiento, añade al menos tres diapositivas, activa la reproducción automática con una pausa de 2.000 ms y deja el bucle desactivado. Espera más allá de dos ciclos completos y confirma que la última diapositiva sigue seleccionada. Activa el bucle y confirma que la reproducción vuelve a la primera diapositiva.
Rellena web_slider con web_slide y confirma que todos los elementos hijos sigan siendo accesibles en el orden previsto. Presta especial atención a slider_content_width y a slider_height.