Carousel

Share via

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. 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 >}}

Arguments

The carousel shortcode supports the following arguments:

ArgumentRequiredDescription
idNoOptional id of the carousel, defaults to “carousel-n” with a sequential number n.
ratioNoAspect ratio of the image, either “1x1”, “3x2”, “4x3”, “16x9”, or “21x9”. If unspecified, the original aspect ratio is preserved.
portraitNo
v0.18.3 
Optional flag to adjust the ratio from landscape to portrait. The images themselves are not rotated, only the crop area is adjusted. This value is ignored when no ratio is set.
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.

Examples

As an example, the following shortcodes display a centered carousel with three slides and various aspect ratio.

Set the ratio to 1x1 for a square aspect ratio.

markdown
{{< carousel id="carousel-1x1" ratio="1x1" class="col-sm-12 col-lg-6 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 >}}

Set the ratio to 3x2 for a landscape aspect ratio.

markdown
{{< carousel id="carousel-3x2" ratio="3x2" 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 >}}

Set the ratio to 4x3 for a landscape aspect ratio.

markdown
{{< carousel id="carousel-4x3" ratio="4x3" 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 >}}

Set the ratio to 16x9 for a landscape aspect ratio.

markdown
{{< carousel id="carousel-16x9" 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 >}}

Set the ratio to 21x9 for a landscape aspect ratio.

markdown
{{< carousel id="carousel-21x9" ratio="21x9" 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 >}}

Omit the ratio to keep the original aspect ratio.

markdown
{{< carousel id="carousel-original" class="col-sm-12 col-lg-8 mx-auto" >}}
  {{< img src="img/coffee.jpg" caption="slide 1" >}}
  {{< img src="img/coffee.jpg" caption="slide 2" >}}
  {{< img src="img/coffee.jpg" caption="slide 3" >}}
{{< /carousel >}}

Set portrait to true for a portrait aspect ratio.

markdown
{{< carousel id="carousel-portrait-3x2" ratio="3x2" portrait="true" class="col-sm-8 col-lg-6 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: September 2, 2023 • Convert to markdown only (6ca4b49)