# Slides

Use Superwall's slides component to create a horizontal or vertical slide UX driven by a user's gesture.

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

The slide component was built to make interactive slide designs easy. It's similar to a [carousel](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-carousel-component), except its meant to be driven by user gestures instead of automatically progressing through its contents. To use the slides component:

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

<img src="__img0" />

The slides 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 slides component is set to `Horizontal` scrolling.
* Scrolling indicators are created for you. Read below to see how you can customize these.
* A default height is assigned.
* The slides respond to gestures.

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

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

<img src="__img2" />

Here, the container stack determines the height. You can customize this as needed.

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

When a slides 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="__img3" />

You can use its `Child Page Index` variable to change which slide is showing. You can use this to manually set which slide is showing. Here, the button progresses to the next slide by incrementing the slides `Child Page Index` variable:

<img src="__img4" />

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



You can also reference this variable when using a [dynamic value](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-dynamic-values) to do things such as:

* Select a product based off of the index of the slide.
* Show custom paging indicators.
* Change text using [dynamic values](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-dynamic-values) based on the index.
* etc.