# Carousel

The **Carousel** is a dynamic element that lets you showcase multiple pieces of content in a compact, swipeable format. It’s perfect for highlighting product images, reviews, testimonials, or any content where you want your visitors to browse without overwhelming the page.

## Adding a Carousel widget <a href="#adding-a-container-widget" id="adding-a-container-widget"></a>

To add a carousel to your canvas, continue with the steps below:

1. Open the funnel you want to edit and edit the page.
2. On the left panel, select the **Carousel** widget.
3. Click and drag it in your layout.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2F9C3gYGQmkMi5hivNmOm4%2Fimage.png?alt=media&#x26;token=28c5c9b3-d73c-4332-8883-a8cd5e764830" alt=""><figcaption></figcaption></figure>

## Customizing the Carousel

Once you added the carousel widget, it will show like the example below.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2F0Ilu3cUrxVHSFWpOg03N%2Fimage.png?alt=media&#x26;token=194c236a-d92b-40ec-af02-fc3e418dfc0b" alt=""><figcaption></figcaption></figure>

Click **(+) Add new slide** to add more slides to your carousel.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2F8P04bmQWqHdm3P9EuUGP%2Fimage.png?alt=media&#x26;token=0f3a4410-41ed-48bc-a629-1af60ad68846" alt=""><figcaption></figcaption></figure>

## Designing the Slides

Now we'll add the content inside each slide.&#x20;

1. Click inside the **(+)** inside the carousel to add the desired element to show in the first slide. In this example, we'll add an image:

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FBOGzlxVSXBVQGbUy0QIP%2Fimage.png?alt=media&#x26;token=3fc0e75b-5a84-4f36-b2cc-9196bb06ea65" alt=""><figcaption></figcaption></figure>

2. Click on the **image element**&#x20;
3. On the left side panel, click **browse** to assign the image.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FH9XC7z8B4xFmkgDmujFn%2Fimage.png?alt=media&#x26;token=961cb78b-577f-40b4-9720-75b5cde9855c" alt=""><figcaption></figcaption></figure>

4. To add content to the next slide, click on the container and on the slide that follows<br>

   <figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FSyKHvNjin7UgTb5pPXrm%2Fimage.png?alt=media&#x26;token=c25fa6ab-d229-476d-aee4-02a949d35fdc" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Repeat steps 1 to 4 until you've completed creating your carousel's slides.
{% endhint %}

Once you're happy with your design, click **Save Changes** and click **Preview** to see it in action.

<div align="center"><figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FjYUSIwLqrWJxakV1pwdy%2Fezgif-147105ee35492a.gif?alt=media&#x26;token=1d935d57-909d-42ba-8000-d785443a2365" alt="" width="160"><figcaption></figcaption></figure></div>

The **Carousel** element in the Funnelish editor lets you showcase multiple pieces of content in a single, swipeable space. It’s perfect for product galleries, testimonials, featured media, or any repeating content you want users to scroll through.

### Adding a Carousel

1. Open your page in the **Funnelish Editor**.
2. From the left-side toolbar, drag the **Carousel** element onto your page.
3. Select the Carousel to open its settings in the left-side panel.

### Managing Slides

* In the left-side panel, click **Add new slide** to create new slides.
* Each slide works like a blank canvas where you can insert any other Funnelish element.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FIhRvZtMGNWEix8PeIO37%2FScreenshot%202025-09-29%20at%2013.52.33.png?alt=media&#x26;token=6940feac-ab6b-4b42-b31c-8c1a4631904c" alt=""><figcaption><p>Adding new slides.</p></figcaption></figure>

#### Examples of what you can add to slides:

* **Images or videos** → Create a media gallery (this replaces the old Image Slider).
* **Review containers** → Showcase customer testimonials in a rotating layout.
* **Product blocks** → Highlight multiple products in one section.
* **Text or call-to-actions** → Add headlines, descriptions, or buttons.

You can combine elements as needed, since each slide is fully customizable.

### Customizing the Carousel

In the left-side settings panel, you can configure:

* **Direction** for the slides (horizontal or vertical).
* **Autoplay** → Automatically cycle through slides.
* **Looping** → Decide whether the carousel repeats continuously.
* **Show arrows** → Display navigation arrows on the sides of the carousel. You can customize these further by just clicking on the arrows (from editor) and can change their look from the leftside bar.
* **Show pagination** → Display dots or pagination indicators under the carousel.
* **Slides per view** → Decide how many slides are visible at once.
* **Effect** → Choose between different slide transition effects (e.g., slide, fade).
* **Speed** → Adjust how fast the transition happens (in milliseconds).

{% hint style="success" %}
You can now create advanced carousel displays on your Funnelish pages.&#x20;
{% endhint %}


---

# 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.funnelish.com/start/funnel-builder/carousel.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.
