A Slideshow is a set of large banners shown one at a time. Each slide has a background (image or video, with optional color overlay) and a block of text positioned over it, with its own entrance effect and an optional link. It is the component for hero areas, announcements and calls to action.
What it is for
Use it at the top of a home or landing page, or to introduce a section with a strong visual. Unlike a Carousel, a Slideshow shows a single slide at a time and is designed around text over the image.
See it live on the example page APB Slideshow, which includes a background-video slide.
Structure
- The Slideshow component sets the height, the navigation style and whether the slides span the full window width.
- Slides — one per banner. A slide has three layers: the background (image or video) with an optional slide overlay color, and the content box (title, body, link) with its own optional background color, position, width and effect.
Component settings
| Setting | Options | Default | What it does |
|---|---|---|---|
| Section Title / Show Section Title / Intro | — | — / No / empty | See Section Title and Intro Text. Usually left hidden for hero slideshows. |
| Target Placement | Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3 | Body | See Target Placement. Top region puts the slideshow above the page title. |
| Min Height | 300px … 700px, 50vh … 100vh | 400px | Minimum height of every slide. Values in vh are a share of the window height (100vh = a full screen). |
| Navigation | None, Bullet over Slides, Bullet under Slides, Thumbnail | None | How visitors move between slides: no controls (autoplay only), dots on or below the slides, or small thumbnails of each slide. |
| Force Full Width | Yes / No | No | Stretch the slides to the edges of the browser window, ignoring the content column. |
| Color Style | Black, White, Teal Blue, Blue, Orange, Green, Red, Silver and Blue | — (required) | Color of arrows, bullets and links. See Color Style. |
| Component Width | 25% … 100% | 100% | See Component Width; ignored when Force Full Width is Yes. |
| Custom Class / Access Control | — | — | See Advanced settings. |
| Container Settings | padding and margins only | 32px bottom margin | The Slideshow keeps its own backgrounds per slide, so only Padding and Margins are offered. |
Slide fields
Content and layout (Setup / Content / Link)
| Field | Required | What it does |
|---|---|---|
| Title | yes | Heading of the content box. |
| Body | no | Rich text under the heading (keep it to a few lines). |
| Link | no | URL opened when the slide is clicked. |
| Type | yes (Horizontal full) | Boxed — the content box is a compact panel of the chosen Content Width, placed with the two position settings. Horizontal full — the box is a band across the whole slide width (text aligned by Horizontal Position). Vertical full — the box is a column as tall as the slide (placed by Horizontal Position). |
| Horizontal Position / Vertical Position | yes (Center / Center) | Where the content box sits on the slide: Left/Center/Right and Top/Center/Bottom. |
| Content Width | yes (1100px) | Maximum width of the content box, 300px … 1200px. |
| Margin / Padding | yes (0px / 30px) | Space outside / inside the content box. |
| Effects | no (None) | Entrance animation of the content box: Fade In, Fade In Bottom/Left/Right/Top, Zoom In. |
| Text shadow | yes (No) | Soft shadow behind the text for readability over photos. |
| Description / Custom Class | no | Editor note (never shown) / extra CSS class. |
Background Image / Background Video
| Field | What it does |
|---|---|
| Background Image | Photo behind the slide (PNG, GIF, JPG, WebP); adjust the crop after upload. Used when there is no video, and as the fallback while a video loads. |
| Background Video | An uploaded video (media) played muted in a loop behind the slide on desktop screens. |
| Background Video Mobile | A lighter video (uploaded or YouTube/Vimeo) used on small screens instead of the desktop one. |
Background Slide and Background Content
Two independent color layers, each with the same controls:
| Field | What it does |
|---|---|
| Overlay / Background Color | The main color. Background Slide tints the whole slide over the image; Background Content fills the content box. |
| Opacity | 0–100% transparency of that color (in 5% steps). |
| Gradient, Secondary, Opacity, Orientation | Turn the single color into a gradient towards the Secondary color, running Vertical or Horizontal. |
How to use it
- Click Add Slideshow. Set Min Height (for a hero: 60vh–80vh), Navigation and, for a page-wide banner, Force Full Width = Yes and Target Placement = Top region.
- Click Add new Slide. Upload the Background Image and adjust its crop.
- Type the Title and Body. Choose the Type and positions: for a classic hero, Boxed, Left, Center, Content Width 600px.
- Give the content box a background: Background Content color with 70–85% opacity, or leave it transparent and enable Text shadow.
- Optionally add an Effect and a Link. Click Create, repeat for other slides, and save.
Tips
- Use images at least 1920px wide for full-width slideshows; check the crop on a narrow window too.
- Keep videos short and small (a few MB); always add a Background Image as fallback and a mobile video or none for phones.
- A dark Background Slide overlay at 30–50% opacity makes white text readable on almost any photo.
- One slide is a perfectly valid slideshow: it is the easiest way to make a hero banner with text over an image.
For site builders
| Item | Value |
|---|---|
| Module | apb_pb_slideshow |
| Paragraph types | apb_pb_slideshow, apb_pi_slideshow |
| Requires | apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, Better Formats, Color Field, Crop, Image Widget Crop, Taxonomy Machine Name, core Media / Image / Link / Options / Taxonomy / Text; media types video and remote_video |
| Own vocabularies | apb_tax_ss_type, apb_tax_ss_navigation, apb_tax_ss_effects, apb_tax_content_width; crop type apb_slideshow; image styles apb_slideshow, apb_video_thumb |
| Shared vocabularies | apb_tax_min_height, apb_tax_margin, apb_tax_padding, apb_tax_cs_01, apb_tax_width, apb_tax_target_placement |
| Front-end | apb_pb_slideshow/frontend: Splide (fade/slide, thumbnails), WOW/animate effects, video backgrounds with mobile switch; slide settings exposed as data-apb-ss-*. |
| Container settings | Spacing-only profile (padding + margin); no border, background or media. |
| Example page | /apb/apb-slideshow |