web_carousel_feed Shortcode
The web_carousel_feed shortcode renders the carousel feed 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.
Usage
[web_carousel_feed]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
query_type |
custom |
custom, single_posts |
The default query gets 12 posts per page ordered by date descending. Custom queries can be created in Theme settings. |
single_posts |
— | A value selected from WordPress | Controls the single posts. Available when query_type is single_posts. |
custom_query |
1 |
String unless stated otherwise | Controls the custom queries. Available when query_type is custom. |
only_related |
— | yes |
Controls the only related to current post. |
related_display_mode |
mix |
mix, split |
Controls the related posts display mode. Available when only_related is yes. |
layout |
default |
default or a configured custom feed-template slug |
Selects the template used for each carousel result. |
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_contain |
— | yes |
If checked, carousel will be contained. Available when web_carousel_style is style_2. |
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_slide_numbers |
— | yes |
If checked, numbers 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_pause_autoplay_on_hover |
— | yes |
Pause timed autoplay or continuous scroll while hovering. Leave empty to keep moving. |
web_carousel_yes_autoplay |
— | yes |
If checked, autoplay will be enabled. |
web_carousel_autoplay_speed |
3000 |
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_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 section 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. |
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_feed custom_query="1" web_carousel_continuous_scroll="yes" web_carousel_scroll_direction="left" web_carousel_scroll_speed="60" web_carousel_pause_autoplay_on_hover="yes"]Choose a query that returns several items. When related content is split by post type, each carousel receives the same motion settings and pauses independently.
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 result remains available to assistive technology and keyboard navigation, including layouts that show several results simultaneously. Results outside the carousel viewport are hidden from the accessibility tree and made inert until they move into view.
Verification
With continuous scroll disabled, autoplay enabled and looping disabled, the feed stops at its last slide. Enable looping for continuous playback. Hover and tab visibility pauses do not restart playback once the last slide has been reached.
Operate web_carousel_feed with pointer and keyboard input, and confirm labels, focus and motion remain understandable. Pay particular attention to query_type and single_posts.