The Slideshow block renders a CSS slider of nested Slide blocks, typically used as a rotating banner at the top of a page. Each slide shows an image or video with optional overlay and layered content built from theme or app blocks.
Slideshow
Updated 2 months ago
The Slideshow block renders a CSS slider of nested Slide blocks, typically used as a rotating banner at the top of a page. Each slide shows an image or video with optional overlay and layered content built from theme or app blocks.
Autoplay, infinite loop, and the previous/next navigation activate only when the slideshow has more than one slide. With a single slide, the slideshow is static, the navigation is hidden, and the previous button starts disabled.
Settings
The Slideshow block's settings control the color scheme, card treatment, media height, autoplay behavior, spacing, and device visibility.
Setting | Description | Default |
|---|---|---|
Enable color scheme | Applies a color scheme to the slideshow. The scheme applies only when this is enabled and a scheme is chosen. | Off |
Color scheme | The color scheme applied to the block. | Scheme 1 |
Show content on card | Displays the slide content on a card. Also gates the border-radius settings. | Off |
Enable border radius | Adds rounded corners to the card. Available only when Show content on card is enabled. | Off |
Border radius scheme | Selects one of three border-radius schemes for the card's rounded corners. Available only when border radius is enabled. | Scheme 1 |
Border radius scheme (inner) | Selects one of three border-radius schemes for the inner slider. Available only when border radius is enabled. | Scheme 1 |
Media height | Sets the slideshow height in pixels: Auto (400/400 px), Small (300/450 px), Medium (400/550 px), or Large (500/650 px) on mobile/desktop. | Auto |
Autoplay | Advances slides automatically. Applies only when more than one slide exists. | Off |
Autoplay speed | Seconds between slides, from 3 to 10. Available only when autoplay is enabled. | 5 sec |
Infinite loop | Wraps the slideshow back to the start after the last slide. Applies only when more than one slide exists. | On |
Margin top (Desktop) / (Mobile) | Space above the block on each device, from 0 to 34. | 0 |
Hide block on desktop / on mobile | Hides the slideshow on the chosen device. | Off |
Slides
Each Slide block is one banner with its own media and overlay. Slides accept @theme and @app content, so you can layer text, buttons, and app blocks on top of the media with the Group, Heading, and Button blocks.
Setting | Description | Default |
|---|---|---|
Enable color scheme | Applies a color scheme to the slide's content. The scheme applies only when enabled and chosen. | Off |
Color scheme | The color scheme applied to the slide. | Scheme 1 |
Media type | Whether the slide uses an image or a video. | Image |
Image (Desktop) / Image (Mobile) | Images shown on desktop and mobile. When the mobile image is blank, the desktop image is reused for mobile. | Blank |
Video (Desktop) / Video (Mobile) | Videos shown on desktop and mobile. Videos autoplay muted and loop. When the mobile video is blank, the desktop video is reused for mobile. | Blank |
Use overlay | Adds a layer over the media to keep content readable. Exposes the overlay color and style settings. | Off |
Overlay color | Color of the overlay, adjustable with opacity. Available only when Use overlay is enabled. | #00000026 |
Overlay style | Renders the overlay as Solid or Gradient. Available only when Use overlay is enabled. | Solid |
Gradient direction | Direction the gradient fades out, Up (to top) or Down (to bottom). Available only when the overlay is enabled and Overlay style is Gradient. | Up |
When both image settings or both video settings are blank, the slide renders a lifestyle-1 placeholder image.
FAQ
What is the Slideshow block in the Pops theme?
What media heights can I set for the Pops slideshow?
Media height sets the slideshow height in pixels: Auto (400/400 px), Small (300/450 px), Medium (400/550 px), or Large (500/650 px) on mobile/desktop. The default is Auto.
Can a Pops slide use a video instead of an image?
Yes. Set the Media type to Video and choose a video for desktop and mobile. Videos autoplay muted and loop. When the mobile video is blank, the desktop video is reused for mobile.
How do I add rounded corners to the slideshow card?
Enable Show content on card to display the slide content on a card, then enable Enable border radius to add rounded corners. The border radius and inner border radius schemes each select one of three radius styles and are available only when border radius is enabled.
What happens if I leave the image and video fields blank in a Pops slide?
When both image settings or both video settings are blank, the slide renders a lifestyle-1 placeholder image.
Was this helpful?
Was this helpful?