Carousel

Use the carousel shortcode to display a carousel of several images.

Overview

Use the carousel shortcode to display a carousel of several images, with similar behavior as the image

Arguments

The shortcode supports the following arguments:

ArgumentRequiredDescription
ratioNoAspect ratio of the image, either “1x1”, “4x3”, “16x9”, or “21x9”. If unspecified, the original aspect ratio is preserved.
classNoOptional class attribute of the carousel element, e.g. “w-75”.

Add an inner img element for each slide of the carousel. The img element supports the following arguments:

ArgumentRequiredDescription
srcYesRequired url of the image, e.g. “img/boots.jpg”.
captionNoOptional image caption. If set, the image is darkened to improve the contrast. The caption is hidden on smaller screens.

Example

As an example, the following shortcode displays a centered carousel with three slides, 16x9 aspect ratio, and a relative width of 67% on large screens.

markdown
{{< carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" >}}
  {{< img src="img/coffee.jpg" caption="slide 1" >}}
  {{< img src="img/phone.jpg" caption="slide 2" >}}
  {{< img src="img/dunes.jpg" caption="slide 3" >}}
{{< /carousel >}}
Last updated: February 12, 2023 • Upgrade to docs v0.9 (2caaad8)