> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/sections/banners-carousel.md).

# Banners carousel

Provides functionality for building a list of banners with a scrolling effect.

*Shared Settings*:

* [<mark style="color:$primary;">Banner image</mark>](#banner-image)
* [<mark style="color:$primary;">Section layout</mark>](/triumph/template/shared-settings/section-layout.md)
* [<mark style="color:$primary;">Section mobile layout</mark>](/triumph/template/shared-settings/section-mobile-layout.md)
* [<mark style="color:$primary;">Divider line</mark>](/triumph/template/shared-settings/divider-line.md)
* [<mark style="color:$primary;">Section background</mark>](/triumph/template/shared-settings/section-background.md)
* [<mark style="color:$primary;">Colors</mark>](/triumph/template/shared-settings/colors.md)
* [<mark style="color:$primary;">Carousel buttons colors</mark>](/triumph/template/shared-settings/carousel-buttons-colors.md)

*Shared Blocks:*

* [<mark style="color:$primary;">Heading</mark>](/triumph/template/shared-blocks/heading.md)
* [<mark style="color:$primary;">Banner</mark>](/triumph/template/shared-blocks/banner.md) *(The block can be added multiple times to form a carousel.)*

***

#### **Banner image**

Use the '**Aspect ratio**' drop-down to choose the shape of images:

* **Adapt to image** – Keeps each image’s original proportions.
* **Squared** – Displays images in a 1:1 ratio.
* **Portrait** – Taller images (3:4 ratio).
* **Landscape** – Wider images (4:3 ratio).

***

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FvLML9xsTClAj0JyCFtOH%2Fbanners%20carousel_desktop.png?alt=media&amp;token=1601662d-28d1-4377-b335-501339de6937" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fyzfrzacn9yeAHnfJVdN3%2Fbanners%20carousel_mobile.png?alt=media&amp;token=4094b2a9-2952-4339-a7c8-e3a7020d348c" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}