Carousel Leaf
<time datetime="2023-06-27 04:00:00 +0000 UTC">June 27 2023</time><span class="px-2 text-primary-500">·</span><time datetime="2024-02-20 16:00:25 -0600 CST">Updated: February 20 2024</time><span class="px-2 text-primary-500">·</span><span>191 words</span><span class="px-2 text-primary-500">·</span><span title="Reading time">1 min</span>
Blowfish
Shortcodes
Carousel
blowfish shortcodes - This article is part of a series.
🐡 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 index.md 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 _index.md page which invoked it.
This page has no resources. Nothing to show!
| 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" >}}
