# Carousel controls
**Carousel controls** are key elements that let users navigate through slides or featured content with ease. Whether you're showcasing product images, testimonials, or promotional banners, controls like arrows or dots help guide the user’s experience.
Foxify makes it easy to add, style, and position your carousel controls to match your store’s design and provide a smooth, interactive browsing experience.
## How to add a Carousel controls
{% hint style="success" %}
Steps:
1. In the FoxStudio editor, on the left Sidebar > Click **Add elements**, or press **E**.
2. In **Quick add**, select **Carousel controls.**
3. Drag the **Carousel controls** onto your carousel.
{% endhint %}
## How to edit a Carousel controls
Once you’ve added the carousel controls, the next step is to edit its text to match your desired action.
{% hint style="success" %}
**Steps:**
1. **Select** the relevant carousel controls element in the editor.
2. Use the tools bar above the selected element to quickly edit it.
All the formatting tools below can be found in the right hand sided **Inspector** panel.
{% endhint %}
### General settings
* **Show navigation:** Toggle this on to display navigation arrows.
* **Navigation buttons:**
* Next & Previous
* Prev button only
* Next button only
{% tabs %}
{% tab title="Next & Previous" %}
{% endtab %}
{% tab title="Prev button only" %}
{% endtab %}
{% tab title="Next button only" %}
{% endtab %}
{% endtabs %}
* **Navigation icon:** Choose Arrows/Chevrons
{% tabs %}
{% tab title="Arrows" %}
{% endtab %}
{% tab title="Chevrons" %}
{% endtab %}
{% endtabs %}
* **Show pagination:** Toggle this on to display pagination indicators.
* **Pagination type:** Choose Bullets/Number/Lines
{% tabs %}
{% tab title="Bullets " %}
{% endtab %}
{% tab title="Number" %}
{% endtab %}
{% tab title="Lines" %}
{% endtab %}
{% endtabs %}
### Design settings
**Size & Constraints Settings:** Use these controls to define the element’s dimensions and positioning behavior across devices.
{% content-ref url="../layout-and-styling/constraints" %}
[constraints](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/constraints)
{% endcontent-ref %}
{% tabs %}
{% tab title="Element container" %}
* **Color Fill:** Set the color and background color of the element.
* **Text Font, Spacing, and Styles**
* **Font**: Choose from hundreds of fonts. You can also [upload your own fonts to Foxify](https://docs.foxecom.com/foxify-app/faqs/edit-your-pages/add-custom-font).
* **Weight** and **Size**: Define the font weight and font size of the text.
* **Text case**: Click the icons to set the text's capitalization: **As typed** , **Upper case** **AG**, **Title case** **Ag**, or **Lower case** **ag**.
* **Spacing:** Change the spacing between the lines and characters in the text box.
* **Text style**: Normal/*Italic*.
{% endtab %}
{% tab title="Nav buttons" %}
* **Color Fill:** Set the color and background color of the navigation buttons.
* **Size:** Adjust the width, height, and icon size of the navigation button to fit your design needs.
{% endtab %}
{% endtabs %}
### Animations
{% content-ref url="../layout-and-styling/animations" %}
[animations](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/animations)
{% 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/carousel-controls.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.
