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

# Add a slider to a widget

> Add a slider element to your widget, edit slides, position it, and customize transition animations and autoplay behavior.

A slider lets you cycle through multiple images, offers, or messages inside a single widget element.

In this article, you learn how to:

* Add a slider
* Edit slides
* Position a slider
* Customize slide transitions

## Add a slider

To add a slider to your widget:

1. Click **Add element** in the left sidebar.
2. Unfold the **Media** section in the list.
3. Click **Slider**. A panel opens where you can edit the slider.

## Edit slides

A new slider contains three slides by default.

To add a slide, click **Add new slide** in the **Slider Content** section. To edit an existing slide, click **Edit** next to it.

<Frame style={{ maxWidth: "40%", margin: "0 auto" }}>
  <img src="https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/add-a-slider-to-your-widget/add-new-slide.png" alt="Slider Content panel with three slides and the Add new slide option" />
</Frame>

## Position a slider

Drag the slider on the canvas to place it anywhere in your widget.

## Customize slide transitions

Click **Slider Animation** to configure how your slides transition:

* **First slide**: the slide that displays first.
* **Speed**: the transition duration, in milliseconds.
* **Autoplay**: advances slides automatically, without visitor interaction.
* **Effect**: the transition style between slides.
* **Direction**: the direction slides move in.
* **Allow touch move**: lets visitors swipe between slides on touch devices.

<Frame style={{ maxWidth: "40%", margin: "0 auto" }}>
  <img src="https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/add-a-slider-to-your-widget/slider-animation.png" alt="Slider Animation panel with First slide, Speed, Autoplay, Effect, Direction, and Allow touch move settings" />
</Frame>

You can also customize the previous and next arrows and the pagination indicator from the same panel.
