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

Carousel Leaf

<time datetime="2023-08-30 23:48:06 -0500 CDT">Updated: August 30 2023</time>
blowfish shortcodes carousel
blowfish shortcodes - This article is part of a series.
Part 5.2: This Article
🐡 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.

It’s important to note that carousel must be invoked from a leaf bundle page to be able to access images which reside in a subdirectory.

OTHERWISE carousel will only be able to access images in the same directory as the page which invoked it.


Got 7 Resources
NameRelPermalinkResourceType / MediaType.SubTypeContent size
gallery/01.jpg /snippits/blowfish/shortcodes/carousel-leaf/gallery/01.jpg image/jpeg 50377
gallery/02.jpg /snippits/blowfish/shortcodes/carousel-leaf/gallery/02.jpg image/jpeg 51388
gallery/03.jpg /snippits/blowfish/shortcodes/carousel-leaf/gallery/03.jpg image/jpeg 79847
gallery/04.jpg /snippits/blowfish/shortcodes/carousel-leaf/gallery/04.jpg image/jpeg 98953
gallery/05.jpg /snippits/blowfish/shortcodes/carousel-leaf/gallery/05.jpg image/jpeg 82949
gallery/06.jpg /snippits/blowfish/shortcodes/carousel-leaf/gallery/06.jpg image/jpeg 163697
gallery/07.jpg /snippits/blowfish/shortcodes/carousel-leaf/gallery/07.jpg image/jpeg 59587
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="gallery/{01,02,04,03}.jpg" >}}

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

{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}}
blowfish shortcodes - This article is part of a series.
Part 5.2: This Article