Docs
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. 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.
{{< 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:
| Argument | Required | Description |
|---|---|---|
| id | No | Optional id of the carousel, defaults to “carousel-n” with a sequential number n. |
| ratio | No | Aspect ratio of the image, either “1x1”, “3x2”, “4x3”, “16x9”, or “21x9”. If unspecified, the original aspect ratio is preserved. |
| portrait | No | v0.18.3 |
| class | No | Optional 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:
| Argument | Required | Description |
|---|---|---|
| src | Yes | Required url of the image, e.g. “img/boots.jpg”. |
| caption | No | Optional 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.
{{< 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.
{{< 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.
{{< 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.
{{< 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.
{{< 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.
{{< 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.
{{< 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 >}}