From 8a154a87aaff02877e7db693b6e9e929c672af21 Mon Sep 17 00:00:00 2001 From: Mircea-Pavel ANTON Date: Wed, 18 Jan 2023 09:36:10 +0000 Subject: [PATCH] Add docs --- exampleSite/content/docs/shortcodes/index.md | 24 ++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index 07a8ef3c..8d89d391 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/exampleSite/content/docs/shortcodes/index.md @@ -91,15 +91,31 @@ Call to action ## Carousel -`carousel` is used to showcase multiple images in an interactive and visually appealing way. This 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 and using a ratio of `16:9`. +`carousel` is used to showcase multiple images in an interactive and visually appealing way. This 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 and using one of the predefined aspect ratios of `16:9`, `21:9` or `32:9`. -**Example:** + + +| 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. | + + +**Example 1:** 16:9 aspect ratio and verbose list of images ```md -{{}} +{{}} ``` -{{< carousel "gallery/03.jpg" "gallery/01.jpg" "gallery/02.jpg" "gallery/04.jpg" >}} +{{< carousel images="{gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}} + +**Example 2:** 21:9 aspect ratio and regex-ed list of images + +```md +{{}} +``` + +{{< carousel images="gallery/*" aspectRatio="21-9" >}} ## Chart