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

1. 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.
2. Click Add new Slide. Upload the Background Image and adjust its crop.
3. Type the Title and Body. Choose the Type and positions: for a classic hero, Boxed, Left, Center, Content Width 600px.
4. Give the content box a background: Background Content color with 70–85% opacity, or leave it transparent and enable Text shadow.
5. 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