# Layer slider
The Layer slider element creates professional slideshows by pairing images with a flexible content container. Effortlessly incorporate text, buttons, or icons to build eye-catching, dynamic banners.
## How to add a Layer slider element
{% hint style="success" %}
**Steps:**
1. In the FoxStudio editor, on the left Sidebar > Click **Add elements**, or press **E**.
2. Select **Quick add**, select **Layer slider** element.
3. Drag the image slide onto your canvas.
{% endhint %}
## How to edit Layer slide
{% hint style="success" %}
**Steps:**
1. **Select** the relevant layer slide element in the editor.
2. All the formatting tools for the element can be found in the right-handsided **Inspector** panel.
{% endhint %}
### General settings
#### Manage slides
* **Add new slides:**
Click **Layer content** to add a new slide to your layer slide. You can add up to 8 slides within the Layer Slide element.
* **Reorder slides:**
Rearrange your slide to change the order in which your content is displayed to your visitors by dragging the six-dot icon.
* **Remove slides**:
If you no longer need a layer, you can delete it to keep your layer content up to date.
Hover over the slide you want to remove, click the **Remove** icon.
* **Image position**: Choose the image placement relative to the content area: Left or Right.
{% tabs %}
{% tab title="Left " %}
{% endtab %}
{% tab title="Right" %}
{% endtab %}
{% endtabs %}
* **Enable pagination**: Toggle the navigation dots at the center of the slider.
* **Enable autoplay**: Toggle to transition slides automatically and set the duration (in seconds) for each slide to stay on screen.
* **Image ratio**: Set the aspect ratio for the images
{% tabs %}
{% tab title="Adapt to first image" %}
{% endtab %}
{% tab title="Square (1:1)" %}
{% endtab %}
{% tab title="Portrait (3:4)" %}
{% endtab %}
{% tab title="Landscape (4:3)" %}
{% endtab %}
{% endtabs %}
* **Disable slider on mobile**: Toggle this on to disable the sliding transition and display your slides in a vertical layout on mobile.
### Design settings
**Size & Constraints Settings:** Use these controls to define the element’s dimensions and positioning behavior across devices.
{% content-ref url="/pages/SSvw9bNbiI3U8pCyvlpe" %}
[Constraints](/foxify-app/foxstudio/layout-and-styling/constraints.md)
{% endcontent-ref %}
{% tabs %}
{% tab title="Element Container" %}
* **Spacing**: Adjust the spacing (padding and gap) of the element.
* **Backgrounds**: Set background to the theme either with a color or a media. If a color and a media are set as the background of an element at the same time, it will prioritize the media.
* **Borders**: Apply a border to the element and define the border radius value.
{% endtab %}
{% tab title="Content Image" %}
* **Borders**: Apply a border to the element and define the border radius value.
{% endtab %}
{% endtabs %}
### Animations
{% content-ref url="/pages/7gnm1vqOxYHR0d2x5dym" %}
[Animations](/foxify-app/foxstudio/layout-and-styling/animations.md)
{% endcontent-ref %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/layer-slider.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
icon.