> For the complete documentation index, see [llms.txt](https://modernpress-io.gitbook.io/modernpress/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modernpress-io.gitbook.io/modernpress/widgets/carousel.md).

# Carousel

### Introduction

The **Carousel Widget** in **ModernPress** allows you to display dynamic and interactive slideshows with multiple layout styles. Whether showcasing testimonials, portfolio items, team members, or featured products, this widget provides flexibility, smooth animations, and full customization options.

***

#### Key Features:

✅ 5 Unique Layouts 

✅ Fully Responsive & Touch-Friendly 

✅ Autoplay, Loop, and Navigation Controls 

✅ Multi-Item & Asymmetric Layouts 

✅ Speed, Transition, and Animation Options

***

### Adding the Carousel Widget

{% stepper %}
{% step %}
Open your WordPress Dashboard.

{% endstep %}

{% step %}
Edit a page with **Elementor**.

{% endstep %}

{% step %}
Search for **"Carousel"** in the **ModernPress Widgets** panel.

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

{% endstep %}

{% step %}
Drag and drop the widget into your section.

{% endstep %}

{% step %}
Select your desired layout and customize settings.

<div><figure><img src="/files/WdXZTq2PshT8OrEKUIaI" alt=""><figcaption></figcaption></figure> <figure><img src="/files/FRjsdiegG6iBZ91OnIOD" alt=""><figcaption></figcaption></figure></div>

{% endstep %}
{% endstepper %}

***

### Layouts Overview

#### Layout 1 - Full Width Carousel

📌 A large full-screen carousel covering the entire width of the section.\
🎨 Best for **hero sections, banners, and featured content**.

#### Layout 2 - Multi-Item Carousel

📌 Displays multiple items per slide, scrolling in sync.\
🎨 Ideal for **testimonials, product showcases, and team members**.

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

#### Layout 3 - Asymmetric Carousel

📌 Displays **two full items and one half-visible** on each slide.\
🎨 Great for **modern portfolio displays and unique visual storytelling**.

<figure><img src="/files/9VU53Mzm3ueNDJ1NtbLn" alt=""><figcaption></figcaption></figure>

***

### Customization Options

#### Content Settings

📸 **Slides** – Add images, titles, descriptions, and links.\
📏 **Items Per View** – Choose how many items to show per slide.\
🔄 **Autoplay & Loop** – Enable automatic sliding and looping.

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

#### Style Settings

🎨 **Colors & Backgrounds** – Customize text, background, and hover effects.\
🔠 **Typography** – Adjust font size, weight, and spacing.\
📏 **Spacing & Alignment** – Control margins, paddings, and positioning.

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

#### Navigation & Controls

➡️ **Arrows & Dots** – Choose from multiple navigation styles.\
⏳ **Speed & Transition** – Adjust animation speed and effect.\
📱 **Responsive Settings** – Customize layouts for mobile, tablet, and desktop.

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

***

### FAQs

<details>

<summary>Can I control the speed of the slides?</summary>

Yes! In the **Advanced Settings**, you can set the slide transition speed and autoplay duration.

</details>

<details>

<summary>How do I change the number of items visible per slide?</summary>

In the **Content Settings**, adjust the **Items Per View** option based on your layout preference.

</details>

***

### Need Help?

If you have any questions or need support, feel free to reach out at <support@modernpress.com>.