> ## Documentation Index
> Fetch the complete documentation index at: https://help.kajabi.com/llms.txt
> Use this file to discover all available pages before exploring further.

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://help.kajabi.com/feedback

```json
{
  "path": "/articles/website/pages/how-to-add-a-carousel-section",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# Add a carousel section

> Learn to feature your images, videos, and testimonials on your page with an interactive Carousel Section.

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/71lphkmvpf" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

<Note>
  **Note:** The Carousel Section is available with the latest version of Encore. If you are using a previous version, you will need to [update your template](/articles/website/pages/how-to-update-a-template) or create a [new custom page](/articles/website/pages/how-to-add-pages-to-your-website) to use the Carousel Section.
</Note>

***

## What is a carousel section?

With the Carousel Section you can showcase your images, videos, and testimonials with an engaging, interactive slideshow or carousel:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/42fagugpfz" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Adding a carousel section

* Open the **Website** tab from your Dashboard
* Select the **Pages** tab
* Open the page editor for your page. [Learn more](/articles/website/pages/how-to-get-to-the-page-editor)
* Navigate to the sidebar panel
* Click **Add Section**
* Select **Carousel** as the Section type
* Click **Add** to generate the new Carousel Section at the bottom of your page
* Then, click **Save** to keep your changes:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/7xkwscysre" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Customizing your carousel section

Begin customizing your Carousel Section by enabling **Edit Mode** to easily view each Carousel Block while you are editing your Section:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/4er579xmr1" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Carousel capabilities

The Carousel Section contains Blocks that you may be familiar with (i.e., images, videos, and testimonials), but there are unique capabilities that are only available with the Carousel Section.

With the Carousel Section you can create custom, interactive slideshows containing your uploaded images, testimonials, and videos.

### Carousel blocks

* **Image Slide**: Upload a new image or recent image file. [Learn more about the Image Block](/articles/website/pages/how-to-add-an-image-to-your-page)
* **Testimonial Slide**: Showcase your testimonials with customizable text and upload an image of your recommender
* **Video Embed Slide**: Upload video embed code. [Learn more about the Video Embed Block](/articles/website/pages/how-to-add-a-video-embed-block)
* **Video Slide**: Upload a new video or recent video file. [Learn more about the Video Block](/articles/website/pages/how-to-add-a-video-embed-block)

### To add carousel blocks

* Open the Carousel Section
* Navigate to the sidebar editor
* Click **Add Content**
* Select your desired Block:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/wymg9nwyba" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Carousel section settings

Adjust your Carousel Section Settings to change the appearance, size, arrows, and animation.

### Width

Enable **Full Width** to display your media content with the full width of the browser window:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/ublei5rez6" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

### Height

Adjust the height of your Section after each slide change.

### Navigation

Enable **Show navigation** to give your viewers a page indicator to preview the number of pages they can view in your carousel:

<img src="https://mintcdn.com/kajabi-support/fIOZvo-6lVf3a0o9/articles/images/fdbe4042_16961882556315.png?fit=max&auto=format&n=fIOZvo-6lVf3a0o9&q=85&s=adbbb6f5c071096cd17d76ebc8ccc4b2" alt="1F7D4E30-7C99-4681-9564-2B1A3FA23260.png" width="1657" height="828" data-path="articles/images/fdbe4042_16961882556315.png" />

Customize the navigation indicator size (8 - 24) and spacing (2 - 24) with the slider or by entering your desired units.

### Arrows

Choose to **Hide arrows** from your viewers, customize the arrow color to fit your brand, and adjust the arrow size with the slider or by entering your desired size:

<img src="https://mintcdn.com/kajabi-support/CAw_ZGr15nGGoiQk/articles/images/0b23f289_16961931499163.png?fit=max&auto=format&n=CAw_ZGr15nGGoiQk&q=85&s=22bee72d14c0a26b396783875252c921" alt="F43ACBF4-2659-4613-98D6-800E341DA7CB.png" width="1657" height="828" data-path="articles/images/0b23f289_16961931499163.png" />

### Animation

With the Animation setting, you can enable **Autoplay slides** to automatically change the slides without requiring your viewers to click through them manually:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/znzhk7q4da" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

### Type

Customize the transition type to slide or fade into the next media asset:

**Slide**:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/znzhk7q4da" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

**Fade**:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/it8hxk5rt2" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Additional section settings

Click into the following settings to learn more:

* [Background](/articles/website/pages/how-to-customize-your-section-background-settings)
* [Section Layout](/articles/website/pages/customizing-section-layout-settings)
* [Time Reveal](/articles/website/pages/customizing-time-reveal-settings)