# Slideshow

{% embed url="<https://youtu.be/QW4vpQhWHwc>" %}

<figure><img src="/files/UTZeN5Zu8Wxu4Vu1jYof" alt=""><figcaption><p>Source: <a href="https://demo.foxify.io/?utm_source=foxecom&#x26;utm_medium=help_center_foxify_slideshow&#x26;utm_campaign=anchor_text&#x26;utm_term=demo_bags">Demo Bags</a></p></figcaption></figure>

Display a series of images or content in a rotating, visually appealing format. This interactive feature captures the attention of visitors, creating an engaging experience that encourages them to explore more.

## How to add Slideshow

{% hint style="success" %}
**Steps:**

1. In the FoxStudio editor, on the left Sidebar > Click **Add elements**, or press **E**.
2. In **Advanced elements**, select **Slideshow** or select **Quick add** > select **Slideshow.**
3. Drag the slideshow onto your canvas.
   {% endhint %}

<figure><img src="/files/VBe8Zp4MtvRzOjAcjDh3" alt=""><figcaption></figcaption></figure>

## How to edit Slideshow

{% hint style="success" %}
**Steps:**

1. **Select** the relevant slideshow element in the editor.
2. All the formatting tools for the element can be found in the right-handsided **Inspector** panel.
   {% endhint %}

### Manage slides

* **Add new slides:**

Click **Add slide** to add a new slide to your slideshow. You can add up to 5 slides within the Slideshow element.

<figure><img src="/files/GJr8c4mi29T9F2U2HZkS" alt=""><figcaption></figcaption></figure>

* **Reorder slides:**

Rearrange your slides to change the order in which your content is displayed to your visitors by dragging the six-dot icon.

<figure><img src="/files/AdPk66T9IbT4YiJZWljB" alt=""><figcaption></figcaption></figure>

* **Remove slides**:

If you no longer need a slide, you can delete it to keep your slideshow up to date.&#x20;

Hover over the slide you want to remove, click the **Remove** <img src="/files/reX9mp7g5yUvmqNJrG6D" alt="" data-size="line">icon.

<figure><img src="/files/5Mc2a3u6JFX4od6Z6Mqh" alt=""><figcaption></figcaption></figure>

### Customize your slides

Click on the slide you wish to edit in the Slideshow.&#x20;

Each slide includes the following customizable options:

* **Image**: Upload an image to be displayed as the main content of the slide.
* **Mobile image**: For better mobile responsiveness, you can upload a separate image for mobile devices.
* **Image overlay opacity**: Use the slider to adjust the opacity of the overlay. This can help text or other elements placed on top of the slide stand out more clearly.

### Add content over a slide

Add whatever elements you want to your slideshow including text, images, videos, and buttons. Using different content on each slide keeps visitors engaged and encourages them to explore your site further.

<figure><img src="/files/xfgmeOdCAOckWDgHxk4e" alt=""><figcaption><p>An example of adding content to the Slideshow using <a href="/pages/p6gcZTnSpmCOVsMAFM4J">Stack</a></p></figcaption></figure>

{% hint style="info" %}
Use the **Layers panel** to easily navigate and manage the hierarchy of elements on your page.
{% endhint %}

{% content-ref url="/pages/MrWM1r5L3ERggeqPdhyI" %}
[Layers](/foxify-app/foxstudio/editor-tools/layers.md)
{% endcontent-ref %}

<figure><img src="/files/NybQrvpfpit4MYv2UojH" alt=""><figcaption></figcaption></figure>


---

# 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/slideshow.md?ask=<question>
```

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.