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 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.
Got 7 Resources
| Name | RelPermalink | ResourceType / MediaType.SubType | Content 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