GeoHazardWatch

Page Actions


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

ParameterDefaultDescription
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.
interval5000Milliseconds between auto-advances. Set to 0 to disable autoplay.
controlstrueShow previous/next arrow buttons. Use false to hide.
indicatorstrueShow the row of slide-dot indicators. Use false to hide.
height400pxHeight of each slide image (any CSS length: 300px, 50vh, etc.).
max0 (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: cover so they fill the slide area without distortion.
  • Setting interval='0' disables autoplay — the visitor must click arrows or dots to advance.
  • controls='false' and indicators='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 footnotes on this page.

No comments yet.