↓Skip to main content
  1. Snippits/
  2. Blowfish Exemplars/
  3. Blowfish Shortcodes/

Carousel Branch

🐡 Shortcodes
carousel showcases multiple images in an interactive and visually appealing way

carousel allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component using one of the predefined aspect ratios of 16:9, 21:9 or 32:9.

As you can see here, we’re running the carousel from a branch page bundle1.

Carousel can only consume page resources.

For carousel to function, the images must be available as Page Resources2

If in doubt, the shortcode wpldebug-pageresources will enumerate the resources available to the page in question.

{{< wpldebug-pageresources >}}
Parameter Description
images Required. A regex string to match image names.
aspectRatio Optional. The aspect ratio for the carousel. Either 16-9, 21-9 or 32-9. It is set to 16-9 by default.
interval Optional. The interval for the auto-scrooling, specified in milliseconds. Defaults to 2000 (2s)

Example 1: 16:9 aspect ratio and verbose list of images

{{< carousel images="{01,02,04,03}.jpg" >}}

{{< carousel images="0[0-9].jpg" >}}

Example 2: 21:9 aspect ratio and regex-ed list of images

{{< carousel images="/snippits/blowfish/shortcodes/carousel-leaf/gallery/*" aspectRatio="21-9" interval="2500" >}}

  1. https://gohugo.io/content-management/page-bundles/ ↩︎

  2. https://gohugo.io/content-management/page-resources/ ↩︎

There are no articles to list here yet.