# Carousel controls

![image](https://docs-assets.foxecom.app/foxify-app/image_LtJheUbB.png)

**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 type="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.

</Hint>

![image](https://docs-assets.foxecom.app/foxify-app/image_5dhKnG38.png)

## 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 type="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.&#x20;

All the formatting tools below can be found in the right hand sided **Inspector** panel.

</Hint>

![image](https://docs-assets.foxecom.app/foxify-app/image_go8c5NaJ.png)

### General settings

![image](https://docs-assets.foxecom.app/foxify-app/image_tTMkALCy.png)

* **Show navigation:** Toggle this on to display navigation arrows.
* **Navigation buttons:**&#x20;
  * Next & Previous
  * Prev button only
  * Next button only

<Tabs>
<Tab title="Next & Previous">

![image](https://docs-assets.foxecom.app/foxify-app/image_0ru5ihtw.png)

</Tab>

<Tab title="Prev button only">

![image](https://docs-assets.foxecom.app/foxify-app/image_rlLcX3xr.png)

</Tab>

<Tab title="Next button only">

![image](https://docs-assets.foxecom.app/foxify-app/image_eFIKDSfQ.png)

</Tab>
</Tabs>

* **Navigation icon:** Choose Arrows/Chevrons

<Tabs>
<Tab title="Arrows">

![image](https://docs-assets.foxecom.app/foxify-app/image_BUqKiPnH.png)

</Tab>

<Tab title="Chevrons">

![image](https://docs-assets.foxecom.app/foxify-app/image_2GKFZ8sH.png)

</Tab>
</Tabs>

* **Show pagination:** Toggle this on to display pagination indicators.
* **Pagination type:** Choose Bullets/Number/Lines

<Tabs>
<Tab title="Bullets ">

![image](https://docs-assets.foxecom.app/foxify-app/image_QpFn6nQK.png)

</Tab>

<Tab title="Number">

![image](https://docs-assets.foxecom.app/foxify-app/image_bsgqhHE4.png)

</Tab>

<Tab title="Lines">

![image](https://docs-assets.foxecom.app/foxify-app/image_4Lk3zvOL.png)

</Tab>
</Tabs>

### Design settings

**Size & Constraints Settings:** Use these controls to define the element’s dimensions and positioning behavior across devices.

<PageLink href="https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/constraints">Constraints</PageLink>

![image](https://docs-assets.foxecom.app/foxify-app/image_vvW9JjfW.png)

<Tabs>
<Tab title="Element container">

![image](https://docs-assets.foxecom.app/foxify-app/image_q2UgBBub.png)

* **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-and-troubleshooting/faqs/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*.

</Tab>

<Tab title="Nav buttons">

![image](https://docs-assets.foxecom.app/foxify-app/image_rArdzHcW.png)

* **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.

</Tab>
</Tabs>

### Animations

<PageLink href="https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/animations">Animations</PageLink>

![image](https://docs-assets.foxecom.app/foxify-app/image_l08tz3dI.png)