web_slider Shortcode
The web_slider shortcode renders the slider component.
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 |
— | Number | Specifies slider height in pixels. Available when slider_height is slider_height_specific. |
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 |
Number | Specifies the time the slider will be stopped (in milliseconds). Available 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 |
Number | Specifies the speed at which the slide will move. A lower value means lower speed. Available when transition_type is 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
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.