web_carousel Shortcode
The web_carousel shortcode renders the carousel 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_carousel_content.
Usage
[web_carousel]
Content
[/web_carousel]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
web_carousel_style |
style_2 |
String unless stated otherwise | Select carousel style. |
web_carousel_elements_align |
center |
center, left |
Controls the carousel elements align. Available when web_carousel_style is style_2. |
web_carousel_pause_autoplay_on_hover |
— | yes |
Pause timed autoplay or continuous scroll while hovering. Leave empty to keep moving. |
web_carousel_arrows |
— | yes |
If checked, arrows will be visible. |
web_carousel_arrows_style |
default |
default, over_content, next_to_content, below_content |
Controls the arrows style. Available when web_carousel_arrows is yes. |
web_carousel_dots |
— | yes |
If checked, dots will be visible. Available when web_carousel_style is style_2. |
web_carousel_opacity |
— | yes |
If checked, non-primary slides will have less opacity. Available when web_carousel_style is style_2. |
web_carousel_continuous_scroll |
— | yes |
Enable continuous movement with automatic looping instead of timed autoplay. |
web_carousel_scroll_direction |
left |
left, right |
Physical movement direction when continuous scroll is enabled. |
web_carousel_scroll_speed |
60 |
Number from 1 to 300 |
Continuous movement speed in pixels per second. |
web_carousel_yes_autoplay |
— | yes |
If checked, autoplay will be enabled. |
web_carousel_reverse_autoplay |
— | yes |
Reverse automatic movement when autoplay is enabled. Native pause behavior still applies. |
web_carousel_autoplay_speed |
2000 |
Number | Select the carousel speed. Available when web_carousel_yes_autoplay is yes. |
web_carousel_cells_loop |
— | yes |
If checked, infinite loop will be allowed. |
web_carousel_adaptive_height |
— | yes |
If checked, carousel height will adapt to each cell. |
web_carousel_draggable |
yes |
yes |
Enable dragging across slides. |
web_carousel_hash |
— | yes |
Enable hash option to link directly to a carousel item. |
web_carousel_free_scroll |
— | yes |
Enables content to be freely scrolled and flicked without aligning cells to an end position. |
web_carousel_columns |
web-carousel-x2 |
web-carousel-x2, web-carousel-x3, web-carousel-x4, web-carousel-x5 |
Select carousel columns. Available when web_carousel_style is style_2. |
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. |
web_carousel_slide_numbers |
— | yes |
Show the current slide and total count inside the owning carousel, in all three styles. |
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.
Continuous scroll
Continuous scroll moves the content at a steady speed without waiting between slides. It is available in Carousel and Carousel feed, in all three styles. The Slider shortcode and Gutenberg Carousel controls do not expose this option.
- Edit the element in Page Builder. For Carousel feed, open Carousel options.
- Enable Continuous scroll.
- Choose Left or Right in Scroll direction, then set Continuous scroll speed in pixels per second. Higher values move faster.
- Enable Pause AutoPlay on hover to pause while the pointer is over the carousel, or leave it unchecked to keep moving.
- Save the page and check the frontend.
This mode enables looping and free scrolling automatically. It takes precedence over Autoplay, Autoplay speed, Reverse autoplay, and the manual loop setting; those settings still apply when continuous scroll is disabled. Dragging and navigation remain available, and continuous motion resumes after the movement settles. Keyboard navigation and focused links or controls pause continuous movement; leave the carousel to resume. Visitors who request reduced motion receive a stationary carousel with manual navigation. Hidden tabs and off-screen carousels pause until visible again. A single item stays stationary; use enough items to fill the viewport for a continuous strip.
[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]The carousel wrapper exposes data-continuous-scroll="true", data-scroll-direction="left|right", and data-scroll-speed="60". Hover pause reuses data-pause-autoplay-on-hover="true"; omitting it disables hover pause. These attributes configure the existing carousel runtime.
Confirm the direction on the frontend, hover with the pause setting enabled and disabled, drag to another item, and verify the movement resumes without a jump at the loop boundary. If it stays still, check reduced-motion preferences, keyboard focus, visibility, and the item count.
Accessibility
Each visible carousel cell remains available to assistive technology and keyboard navigation, including layouts that show several cells simultaneously. Cells outside the carousel viewport are hidden from the accessibility tree and made inert until they move into view.
Custom arrows support Tab, Enter and Space. Manual navigation stops timed autoplay. Nested carousels keep their own controls and counters. Use unique parent and slide IDs; only one carousel should control the URL hash.
For block-editor authoring, see Build a content carousel in Gutenberg.
Verification
Images may use lazy loading. Scroll to the carousel and confirm its height adjusts when the images appear, then check that every slide remains visible during playback.
With continuous scroll disabled, when autoplay is enabled and looping is disabled, playback stops at the last slide, or at the first slide in reverse direction. A reverse carousel starting on the first slide is already at its stopping point. Enable looping for continuous playback. Hover and tab visibility pauses do not restart a completed run.
Populate web_carousel with web_carousel_content and confirm every child remains reachable in the intended order. Pay particular attention to web_carousel_style and web_carousel_elements_align.