Slideshow is the hero system. Navigation: none, bullet, bullet under, thumbnail. Min-height tokens include vh values. Slides can be boxed, horizontal full, or vertical full, with effects including zoom in, overlay, optional gradient, background image, and background video (media type video only, not remote_video). Text shadow stores 1/0. Overlay opacity is a string key such as 0.45. Container settings are spacing only — slides own their backgrounds. Do not duplicate the outer #apb-slideshow-{id} on the Splide track (data-apb-slideshow-splide).
Use it for heroes. Prefer Carousel for a smaller moving strip inside the body.
Overview
APB-DOCS-COMP-SLIDESHOW
Slideshow is the hero system. Navigation: none, bullet, bullet under, thumbnail. Min-height tokens include vh values. Slides can be boxed, horizontal full, or vertical full, with effects including zoom in, overlay, optional gradient, background image, and background video (media type video only, not remote_video). Text shadow stores 1/0. Overlay opacity is a string key such as 0.45. Container settings are spacing only — slides own their backgrounds. Do not duplicate the outer #apb-slideshow-{id} on the Splide track (data-apb-slideshow-splide).
Use it for heroes. Prefer Carousel for a smaller moving strip inside the body.
Adding the component
Click Add Slideshow. Set navigation and min height. Add slides with type, effect, overlay, media, and content position. Save. A 100vh Top-region slideshow still sits below the stacked header on a phone.
Component configuration
Parent bundle apb_pb_slideshow (Slideshow). 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. 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_intro | Intro | text_long | no | — | empty | Shared. See Shared settings. |
field_apb_section_title | Section Title | string | no | — | empty | Shared. See Shared settings. |
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_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_min_height_tx | Min Height | entity_reference | yes | 300px</code>, <code>400px</code>, <code>500px</code>, <code>600px</code>, <code>700px</code>, <code>50vh</code>, <code>60vh</code>, <code>70vh</code>, <code>75vh</code>, <code>80vh</code>, <code>85vh</code>, <code>90vh</code>, <code>95vh</code>, <code>100vh | [{"target_id":104}] | — |
field_apb_slideshow_items | Slides | entity_reference_revisions | yes | entity: paragraph (apb_pi_slideshow) | empty | — |
field_apb_ss_navigation_tx | Navigation | entity_reference | yes | none</code>, <code>bullet</code>, <code>bullet_under</code>, <code>thumbnail | [{"target_id":221}] | — |
field_apb_force_full_width | Force Full Width | list_string | yes | no=No</code>, <code>yes=Yes | [{"value":"no"}] | — |
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 | empty | — |
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_access_control | Access Control | entity_access_by_role_field | no | — | empty | Shared. See Shared settings. |
Component items
APB Slideshow apb_pi_slideshow
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 | yes | — | empty | — |
status | Published | boolean | no | — | [{"value":true}] | — |
field_apb_pi_desc | Description | string | no | — | empty | Optional short note for editors (autocomplete / disambiguation); not shown on the public slide. |
field_apb_pi_body | Body | text_long | no | — | empty | — |
field_apb_pi_link | Link | link | no | — | empty | — |
field_apb_pi_ss_bg_video | Background Video | entity_reference | no | entity: media (video) | empty | — |
field_apb_pi_ss_type | Type | entity_reference | yes | boxed</code>, <code>horizontal_full</code>, <code>vertical_full | [{"target_id":226}] | — |
field_apb_pi_ss_bg_video_mob | Background Video Mobile | entity_reference | no | entity: media (remote_video, video) | empty | — |
field_apb_pi_ss_hor_position | Horizontal Position | list_string | yes | left=Left ←</code>, <code>center=Center ↔</code>, <code>right=Right → | [{"value":"center"}] | — |
field_apb_pi_ss_ver_position | Vertical Position | list_string | yes | top=Top ↑</code>, <code>center=Center ↕</code>, <code>bottom=Bottom ↓ | [{"value":"center"}] | — |
field_apb_pi_content_width | Content Width | entity_reference | yes | 300px</code>, <code>350px</code>, <code>400px</code>, <code>450px</code>, <code>500px</code>, <code>550px</code>, <code>600px</code>, <code>650px</code>, <code>700px</code>, <code>750px</code>, <code>800px</code>, <code>850px</code>, <code>900px</code>, <code>950px</code>, <code>1000px</code>, <code>1050px</code>, <code>1100px</code>, <code>1200px | [{"target_id":251}] | — |
field_apb_pi_ss_bg_overl_grad | Gradient | list_string | yes | no=No</code>, <code>yes=Yes | [{"value":"no"}] | — |
field_apb_pi_margin | Margin | entity_reference | yes | 0px</code>, <code>5px</code>, <code>10px</code>, <code>15px</code>, <code>20px</code>, <code>25px</code>, <code>30px</code>, <code>32px</code>, <code>0px_30px</code>, <code>30px_0px</code>, <code>35px</code>, <code>40px</code>, <code>45px</code>, <code>50px</code>, <code>55px</code>, <code>60px | [{"target_id":87}] | — |
field_apb_pi_padding | Padding | entity_reference | yes | 0px</code>, <code>5px</code>, <code>10px</code>, <code>15px</code>, <code>20px</code>, <code>25px</code>, <code>30px</code>, <code>32px</code>, <code>35px</code>, <code>40px</code>, <code>45px</code>, <code>50px</code>, <code>55px</code>, <code>60px | [{"target_id":79}] | — |
field_apb_pi_ss_bg_overlay | Overlay | color_field_type | no | — | empty | — |
field_apb_pi_ss_bg_overlay_op | Opacity | list_string | yes | 0=0</code>, <code>0.05=5</code>, <code>0.1=10</code>, <code>0.15=15</code>, <code>0.2=20</code>, <code>0.25=25</code>, <code>0.3=30</code>, <code>0.35=35</code>, <code>0.4=40</code>, <code>0.45=45</code>, <code>0.5=50</code>, <code>0.55=55</code>, <code>0.6=60</code>, <code>0.65=65</code>, <code>0.7=70</code>, <code>0.75=75</code>, <code>0.8=80</code>, <code>85=0.85</code>, <code>0.9=90</code>, <code>0.95=95</code>, <code>1=100 | [{"value":"1"}] | — |
field_apb_pi_ss_effects | Effects | entity_reference | no | none</code>, <code>fade_in</code>, <code>fade_in_bottom</code>, <code>fade_in_left</code>, <code>fade_in_right</code>, <code>fade_in_top</code>, <code>zoom_in | [{"target_id":228}] | — |
field_apb_pi_ss_gradient | Gradient | list_string | yes | no=No</code>, <code>yes=Yes | [{"value":"no"}] | — |
field_apb_pi_ss_bg_color | Background Color | color_field_type | no | — | empty | — |
field_apb_pi_ss_bg_overlay_sec | Secondary | color_field_type | no | — | empty | — |
field_apb_pi_ss_text_shadow | Text shadow | list_string | yes | 0=No</code>, <code>1=Yes | [{"value":"0"}] | — |
field_apb_pi_custom_class | Custom Class | string | no | — | empty | — |
field_apb_pi_ss_bg_color_op | Opacity | list_string | yes | 0=0</code>, <code>0.05=5</code>, <code>0.1=10</code>, <code>0.15=15</code>, <code>0.2=20</code>, <code>0.25=25</code>, <code>0.3=30</code>, <code>0.35=35</code>, <code>0.4=40</code>, <code>0.45=45</code>, <code>0.5=50</code>, <code>0.55=55</code>, <code>0.6=60</code>, <code>0.65=65</code>, <code>0.7=70</code>, <code>0.75=75</code>, <code>0.8=80</code>, <code>0.85=85</code>, <code>0.9=90</code>, <code>0.95=95</code>, <code>1=100 | [{"value":"1"}] | — |
field_apb_pi_ss_bg_overl_sec_op | Opacity | list_string | yes | 0=0</code>, <code>0.05=5</code>, <code>0.1=10</code>, <code>0.15=15</code>, <code>0.2=20</code>, <code>0.25=25</code>, <code>0.3=30</code>, <code>0.35=35</code>, <code>0.4=40</code>, <code>0.45=45</code>, <code>0.5=50</code>, <code>0.55=55</code>, <code>0.6=60</code>, <code>0.65=65</code>, <code>0.7=70</code>, <code>0.75=75</code>, <code>0.8=80</code>, <code>0.85=85</code>, <code>0.9=90</code>, <code>0.95=95</code>, <code>1=100 | [{"value":"1"}] | — |
field_apb_pi_ss_bg_color_2 | Secondary | color_field_type | no | — | empty | — |
field_apb_pi_ss_bg_overl_orien | Orientation | list_string | yes | 0=Vertical ↓</code>, <code>1=Horizontal → | [{"value":"1"}] | — |
field_apb_pi_ss_bg_color_2_op | Opacity | list_string | yes | 0=0</code>, <code>0.05=5</code>, <code>0.1=10</code>, <code>0.15=15</code>, <code>0.2=20</code>, <code>0.25=25</code>, <code>0.3=30</code>, <code>0.35=35</code>, <code>0.4=40</code>, <code>0.45=45</code>, <code>0.5=50</code>, <code>0.55=55</code>, <code>0.6=60</code>, <code>0.65=65</code>, <code>0.7=70</code>, <code>0.75=75</code>, <code>0.8=80</code>, <code>0.85=85</code>, <code>0.9=90</code>, <code>0.95=95</code>, <code>1=100 | [{"value":"1"}] | — |
field_apb_pi_ss_orientation | Orientation | list_string | yes | 0=Vertical ↓</code>, <code>1=Horizontal → | [{"value":"0"}] | — |
field_apb_pi_ss_bg_image | Background Image | image | no | entity: file | empty | — |
Examples
Live working examples are on the demo site. Open https://demo.apb.aero.net/components/slideshow for configurations of this component. That page links back here as View documentation.
Shared layout options are not repeated in the video.