Using SlideshowPlugin
The SlideshowPlugin displays a responsive image slideshow (carousel) on any page.
Description
Use this plugin to embed a rotating image gallery directly in a page. Images
advance automatically and visitors can also click the previous/next arrows or
the dot indicators to jump to any slide. See Plugins for a complete list of available plugins.
Syntax
[{SlideshowPlugin images='/images/sample-mountains.jpg,/images/sample-ocean.jpg'}] renders as:
Parameters
| Parameter | Default | Description |
|---|---|---|
images | *(required)* | Comma-separated image URLs or attachment paths. |
captions | *(none)* | Comma-separated captions, one per image. |
alts | *(none)* | Comma-separated alt texts for screen readers. Falls back to the caption, then the filename. |
interval | 5000 | Milliseconds between auto-advances. Set to 0 to disable autoplay. |
controls | true | Show previous/next arrow buttons. Use false to hide. |
indicators | true | Show the row of slide-dot indicators. Use false to hide. |
height | 400px | Height of each slide image (any CSS length: 300px, 50vh, etc.). |
max | 0 (all) | Maximum number of slides to display. |
cssclass | *(none)* | Extra CSS class on the outer wrapper for custom styling. |
Examples
Simple Slideshow
[{SlideshowPlugin images='/images/sample-mountains.jpg,/images/sample-forest.jpg,/images/sample-sunset.jpg,/images/sample-ocean.jpg'}] renders as:
Slideshow With Captions
[{SlideshowPlugin images='/images/sample-mountains.jpg,/images/sample-forest.jpg,/images/sample-sunset.jpg,/images/sample-ocean.jpg' captions='Mountain Vista,Forest Trail,Golden Sunset,Ocean Horizon'}] renders as:
No Autoplay
[{SlideshowPlugin images='/images/sample-mountains.jpg,/images/sample-forest.jpg,/images/sample-sunset.jpg,/images/sample-ocean.jpg' captions='Mountain Vista,Forest Trail,Golden Sunset,Ocean Horizon' interval='0'}] renders as:
Compact Strip
[{SlideshowPlugin images='/images/sample-mountains.jpg,/images/sample-forest.jpg,/images/sample-sunset.jpg,/images/sample-ocean.jpg' height='220px' controls='false'}] renders as:
Fast Autoplay, No Indicators
[{SlideshowPlugin images='/images/sample-mountains.jpg,/images/sample-forest.jpg,/images/sample-sunset.jpg,/images/sample-ocean.jpg' interval='2000' indicators='false'}] renders as:
Notes
- The slideshow requires Bootstrap 5 (included globally in the platform theme).
- Images are displayed with
object-fit: coverso they fill the slide area without distortion. - Setting
interval='0'disables autoplay — the visitor must click arrows or dots to advance. controls='false'andindicators='false'can be combined for a completely hands-off auto-rotating banner.- You can place multiple slideshows on the same page and each will run independently.
No comments yet.