> For the complete documentation index, see [llms.txt](https://docs.kaliumtheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kaliumtheme.com/post-types/portfolio/creating-a-portfolio-item/carousel.md).

# Carousel

A full-width sliding gallery for a project.

The Carousel item type offers a dynamic full-width gallery experience by showcasing images in a carousel format. This layout allows you to feature images in a slideshow that spans the entire width of the page.

You can customize various carousel settings to control the display and behavior of the carousel. This layout type supports images only as gallery items.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-e2f9d125c6ef4fa3d0950e693f420d791080089c%2FCarousel%20-%20Preview.jpg?alt=media" alt=""><figcaption></figcaption></figure>

## Carousel Options

Here, you can configure the layout options for the carousel, which can be set to either **Default Layout** or **Centered Content Layout**, apart from other project gallery options.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-0469498284466051bfd10dcb1f702da36f009a56%2FCarousel%20-%20Options.jpg?alt=media" alt=""><figcaption></figcaption></figure>

### Content Alignment

You can choose between two layout types: **Default Layout** and **Centered Content Layout**. These options allow you to align the content either to the left or center it within the page.

<div><figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-53f35ca694180f350e690034491125def37a54f7%2FCarousel%20-%20Content%20Alignment%20-%20Start.jpg?alt=media" alt="" width="375"><figcaption><p>Left alignment (Right in RTL)</p></figcaption></figure> <figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-1bbc4c98f759061362247484f3a5b943106f00c8%2FCarousel%20-%20Content%20Alignment%20-%20Center.jpg?alt=media" alt="" width="375"><figcaption><p>Centered content alignment</p></figcaption></figure></div>

### Carousel Items Alignment

The gallery items can have a starting position that can be either **Left** (default) or **Center**:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-00b3e4daf94edc0cda1b2aa31c8e1dbc66c5be41%2FCarousel%20-%20Carousel%20Items%20Alignment.jpg?alt=media" alt=""><figcaption></figcaption></figure>

The starting position of gallery items determines the placement of the first image relative to the center of the viewport:

<div><figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-ee0df492f0533a65b73d7c7199669511c6ba47da%2FCarousel%20-%20Carousel%20Items%20Alignment%20-%20Start.jpg?alt=media" alt="" width="375"><figcaption><p>Left start position</p></figcaption></figure> <figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-384dc865af59cb914f04be08d3ab3207b953421b%2FCarousel%20-%20Carousel%20Items%20Alignment%20-%20Center.jpg?alt=media" alt="" width="375"><figcaption><p>Center start position</p></figcaption></figure></div>

{% hint style="info" %}
Note that setting **Carousel Start Position** to **Center** and having **Infinite Loop Slides** enabled will not work.
{% endhint %}

## Project Gallery

The **Project Gallery** for the Carousel item type supports images only. The gallery container has the following options:

* **Images Reveal Effect**: *None*, *Fade* or *Slide and Fade* for revealing gallery items.
* **Image Spacing**: *Default spacing* or *No spacing (merged)*.
* **Image Captions Position**: *Use from Theme Options*, *On hover* or *Below image*.
* **Gallery Columns Gap**: The gap between items, in pixels.
* **Maximum Image Height**: The tallest an image may be in the carousel.
* **Carousel Start Position**: *Center* or *Left*.
* **Infinite Loop Slides**: Loops the slides endlessly.
* **Auto Play**: Seconds between automatic slide changes. Leave it empty to turn it off.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-d93b5dc8b791173a2a8a573f341efaf52d40c808%2FCarousel%20-%20Project%20Gallery%20Options.jpg?alt=media" alt=""><figcaption></figcaption></figure>

To insert a new carousel item, click **Add New** and select the **Image** type.

Each field contains the information regarding its functionality, making it easy to add and configure your images for the carousel.