Carousel is a Splide-powered strip of slides, each with an image, optional title, and optional link. Use it for a compact gallery of examples or products that should move horizontally.
Use it for several peer images with optional captions. Prefer Slideshow for full-bleed heroes with video backgrounds, overlay gradients, and navigation bullets or thumbnails. Prefer Image Gallery when the point is a lightbox grid, not a moving strip.
Overview
APB-DOCS-COMP-CAROUSEL
Carousel is a Splide-powered strip of slides, each with an image, optional title, and optional link. Use it for a compact gallery of examples or products that should move horizontally.
Use it for several peer images with optional captions. Prefer Slideshow for full-bleed heroes with video backgrounds, overlay gradients, and navigation bullets or thumbnails. Prefer Image Gallery when the point is a lightbox grid, not a moving strip.
Adding the component
Click Add Carousel. Set autoplay, loop, and navigation (these store integers 1/0, not Yes/No). Choose an image size token and whether slide titles show. Add slides with an image and optional link. Save the component, then the page.
Component configuration
Parent bundle apb_pb_carousel (Carousel). Shared fields (section title, placement, width, custom class, intro, container settings, access control) are documented once. Component-specific fields are listed in full from the live Field API dump dated 2026-09-03T03:15:35+00:00.
Container settings sections: padding, margin, border, background. Shared defaults and the validator regex are on Shared settings.
| Field | Label | Type | Required | Accepted values | Default | Notes |
|---|---|---|---|---|---|---|
field_apb_pb_container_settings | Container settings | text_long | no | — | empty | Shared. See Shared settings. |
field_apb_pb_container_bg_media | Background media | entity_reference | no | entity: media (image, video, remote_video) | empty | Shared. See Shared settings. |
field_apb_section_title | Section Title | string | no | — | empty | Shared. See Shared settings. |
field_apb_target_placement | Target Placement | entity_reference | yes | current_position</code>, <code>main_content_no_container</code>, <code>main_content_top</code>, <code>main_content_bottom</code>, <code>presentation_region</code>, <code>sidebar_top</code>, <code>sidebar_bottom</code>, <code>internal_placement_1</code>, <code>internal_placement_2</code>, <code>internal_placement_3 | [{"target_id":52}] | Shared. See Shared settings and Target placement. |
field_apb_pb_intro | Intro | text_long | no | — | empty | Shared. See Shared settings. |
field_apb_carousel_items | Slides | entity_reference_revisions | no | entity: paragraph (apb_pi_carousel) | empty | — |
field_apb_columns_tx | Columns | entity_reference | yes | 1_column</code>, <code>2_columns</code>, <code>3_columns</code>, <code>4_columns</code>, <code>5_columns</code>, <code>6_columns</code>, <code>7_columns</code>, <code>8_columns</code>, <code>9_columns</code>, <code>10_columns | [{"target_id":20}] | — |
field_apb_show_section_title | Show Section Title | list_string | yes | no=No</code>, <code>yes=Yes | [{"value":"no"}] | Shared. See Shared settings. |
field_apb_column_gap_tx | Column Gap | entity_reference | yes | 0px</code>, <code>4px</code>, <code>5px</code>, <code>8px</code>, <code>10px</code>, <code>15px</code>, <code>16px</code>, <code>20px</code>, <code>24px</code>, <code>25px</code>, <code>30px</code>, <code>32px</code>, <code>40px</code>, <code>48px</code>, <code>56px</code>, <code>64px | [{"target_id":31}] | — |
field_apb_carousel_image_size_tx | Slide image size | entity_reference | yes | small</code>, <code>medium</code>, <code>large</code>, <code>xl</code>, <code>2xl | [{"target_id":117}] | — |
field_apb_carousel_autoplay | Autoplay | list_integer | yes | — | [{"value":1}] | — |
field_apb_carousel_navigation | Navigation | list_integer | yes | — | [{"value":1}] | — |
field_apb_carousel_loop | Infinite loop | list_integer | yes | — | [{"value":0}] | — |
field_apb_ca_show_slides | Show slide titles | list_string | yes | no=No</code>, <code>yes=Yes | [{"value":"no"}] | — |
field_apb_width_tx | Component Width | entity_reference | yes | 25_</code>, <code>33_</code>, <code>40_</code>, <code>50_</code>, <code>60_</code>, <code>66_</code>, <code>70_</code>, <code>75_</code>, <code>80_</code>, <code>90_</code>, <code>100_ | [{"target_id":72}] | Shared. See Shared settings. |
field_apb_custom_class | Custom Class | string | no | — | empty | Shared. See Shared settings. |
field_apb_color_style_01 | Color Style | entity_reference | yes | black</code>, <code>white</code>, <code>teal_blue</code>, <code>blue</code>, <code>orange</code>, <code>green</code>, <code>red</code>, <code>silver_and_blue | [{"target_id":1}] | — |
Component items
APB Carousel slide apb_pi_carousel
field_apb_pi_desc is the Inline Entity Form autocomplete label. It is not rendered on the front end.
| Field | Label | Type | Required | Accepted values | Default | Notes |
|---|---|---|---|---|---|---|
field_apb_pi_title | Title | string | no | — | empty | Optional caption shown below the slide when enabled on the carousel. |
status | Published | boolean | no | — | [{"value":true}] | — |
field_apb_pi_carousel_image | Image | image | yes | entity: file | empty | — |
field_apb_pi_custom_class | Custom slide class | string | no | — | empty | — |
field_apb_pi_link | Link | link | no | — | empty | Optional URL wrapping the slide image. |
field_apb_pi_desc | Internal description | string | no | — | empty | Helps identify this slide in editors (not shown on the site). |
Examples
Live working examples are on the demo site. Open https://demo.apb.aero.net/components/carousel for configurations of this component. That page links back here as View documentation.
Shared layout options are not repeated in the video.