web_slider Shortcode
The web_slider shortcode renders the slider component.
In Gutenberg, use Slider and Slide for the equivalent editable composition. Existing shortcodes continue to render when the Legacy Page Builder interface is disabled.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Allowed child shortcodes: web_slide.
Usage
[web_slider]
Content
[/web_slider]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
slider_content_width |
— | container, full_width |
Select width for slide content. |
slider_height |
slider_height_same |
slider_height_specific, slider_height_same, slider_height_fit, slider_height_viewport |
Select slider height. |
slider_height_in_pixels |
— | 1–10000 | Specifies slider height in pixels, only when slider_height is slider_height_specific. Missing or invalid values use 500px. |
slider_autoplay |
— | yes |
If checked slides will move automatically. |
slider_random_mode |
— | yes |
Display the slides in a different order each time the page loads. |
slider_pause_time |
1000 |
500–20000 | Specifies the pause in milliseconds. Applies when slider_autoplay is yes. |
transition_type |
slide_transition |
slide_transition, fade_transition |
Choose whether to slide or fade between slides. |
slider_animation_speed |
0.1 |
0.01–0.1 | Specifies slide motion speed. A lower value means lower speed. Applies to slide_transition. |
slider_hide_arrows |
— | yes |
If checked the arrows will not be visible. |
slider_hide_dots |
— | yes |
If checked the dots will not be visible. |
slider_show_numbers |
— | yes |
Controls the enable slide numbers. |
slider_cells_loop |
— | yes |
If checked, infinite loop will be allowed. |
slider_cells_draggable |
yes |
yes |
Enable dragging across slides. |
slider_pause_on_hover |
yes |
yes |
If checked the slider will pause when mouse is over. |
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
el_id |
— | Valid unique HTML ID | Enter element ID (Note: make sure it is unique and valid according to w3c specification). |
el_class |
— | String unless stated otherwise | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
Enclosed content
Content between the opening and closing tags is processed as WordPress shortcode content. Keep the parent/child structure shown by the visual builder so nested components receive the context they expect.
With slider_height="slider_height_viewport", each slide and its immediate content row fill the slider's viewport height. With slider_height="slider_height_specific", they fill the height set by slider_height_in_pixels. A carousel placed inside a slide keeps its own dimensions and height mode.
Verification
Random order is applied in the browser on each visit, including cached pages. Only the parent's own slides are shuffled; nested carousels retain their contents and counters. Slide numbers belong to their own parent. Empty sliders show no public controls after initialization.
Slide numbers also work with the earlier shortcode markup retained in static HTML page caches.
For viewport or specific height, check that each slide's row background fills the slider from top to bottom. Resize the browser and repeat on a narrow screen. If a slide contains another carousel, confirm that the nested carousel retains its own content height and column widths.
Images may use lazy loading. Scroll to the slider and confirm its height adjusts when the images appear, then check that every slide remains visible during playback.
With Autoplay enabled and Loop slider cells? disabled, the slider advances to the last slide and stops there. Enable looping to repeat continuously. This applies to both slide and fade transitions. Hovering pauses playback when Pause slider on hover is enabled; leaving the slider does not restart playback after it has reached the end. Manual navigation remains available and stops autoplay.
To check this behavior, add at least three slides, enable autoplay with a 2,000 ms pause, and leave looping disabled. Wait beyond two full cycles and confirm the last slide remains selected. Enable looping and confirm playback returns to the first slide.
Populate web_slider with web_slide and confirm every child remains reachable in the intended order. Pay particular attention to slider_content_width and slider_height.