# Carousel

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

### 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.

![](https://2b001d9a-superwall-docs-staging.staffbar.workers.dev/docs/images/paywall-editor-carousel-component.png)

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:

![](https://2b001d9a-superwall-docs-staging.staffbar.workers.dev/docs/images/paywall-editor-carousel-width.png)

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.

![](https://2b001d9a-superwall-docs-staging.staffbar.workers.dev/docs/images/paywall-editor-carousel-defaults.png)

### 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:

![](https://2b001d9a-superwall-docs-staging.staffbar.workers.dev/docs/images/paywall-editor-carousel-items.png)

### 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 **[Variables](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-variables)** tab in the left sidebar, or the variables button in the **[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:

![](https://2b001d9a-superwall-docs-staging.staffbar.workers.dev/docs/images/paywall-editor-carousel-vars.png)

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:

![](https://2b001d9a-superwall-docs-staging.staffbar.workers.dev/docs/images/paywall-editor-carousel-update.png)

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:

![](https://2b001d9a-superwall-docs-staging.staffbar.workers.dev/docs/images/ci_dv.png)