# Carousel

Use Superwall's carousel component to have items automatically progress through slides.

Adding a carousel component [#adding-a-carousel-component]

The carousel component was built to make progressing slide designs easy. It's similar to a [slides component](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-slides-component), except it automatically progresses through its contents instead of being primarily gesture driven. To use the carousel component:

1. In the left sidebar, click **+** to add a new element.
2. Choose **Carousel** under the "Layout" header.

<img src="__img0" />

The carousel component requires an explicit `width` set. Generally, setting this to 100% of the viewport's width works well. This is also the default size set:

<img src="__img1" />

By default:

* The carousel `Scroll` property is set to `Paging`. Required.
* It's `Wrap` property is set to `Don't Wrap`. Required.
* The `Snap Position` property is set to `Center`. Editable.
* `Auto Paging` is set to `Enabled`. Editable.
* Finally, `Paging Delay` is intentionally set low to help with designing its content. Set it to a higher value to see the carousel in action.

<img src="__img2" />

Adding contents to carousels [#adding-contents-to-carousels]

The carousel component has a few demonstration items added to it by default. You can remove these and add your own content:

<img src="__img3" />

Tracking or updating the displayed element in a carousel [#tracking-or-updating-the-displayed-element-in-a-carousel]

When a carousel element is added, Superwall automatically creates an element variable for it (accessed through the &#x2A;*[Variables](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-variables)*&#x2A; tab in the left sidebar, or the variables button in the &#x2A;*[floating toolbar](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-floating-toolbar)**). Its name will match whatever is in the element hierarchy in the left sidebar:

<img src="__img4" />

You can use this to:

* Select a product based off of the index of the carousel.
* Have a button progress to the next slide.
* Change text using [dynamic values](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-dynamic-values) based on the index.
* etc.

> **Note**

The variable's name is derived by the node's unique identifier. You don't need to set or generally
be aware of this value.



For example, here the button progresses to the next slide by incrementing the slides `Child Page Index` variable:

<img src="__img5" />

As another example, we could change the text to represent the different product periods we've set up for our fictional products of weekly, monthly and annual. By using a dynamic value, we can simply check which carousel index is showing and change the text accordingly:

<img src="__img6" />