---
title: "Advanced Carousel"
url: "https://divitorque.com/docs/carousel.md"
canonical: "https://divitorque.com/docs/carousel/"
published: "2026-09-29"
modified: "2026-09-29"
author: "Fahim Reza"
tags:
  - "Modules"
---

# Advanced Carousel

The Advanced Carousel module shows image slides in a Swiper-powered carousel. Its one job is a sliding set of image cards, each with optional text and a button.

## How to add it

1. Open the page in the Divi 5 Visual Builder.
2. Add a module to a row and search for **Advanced Carousel**.
3. Add slides with the module's item control. Each slide is an **Image Carousel Item**.
4. Fill in each slide, then adjust the carousel settings on the parent module.

## Content tab: Advanced Carousel (parent)

### Slides

- **Slides to Show**: default 3, range 1 to 8. Lower this on tablet and phone.
- **Slides to Scroll**: default 1, range 1 to 8.
- **Gap Between Slides**: default 15px.
- **Vertical Direction**: off by default. Slides up and down instead of left and right.
- **Variable Slide Width**: off by default. Each slide keeps its own width.
- **Slide Width**: default 360px. Used when Variable Slide Width is on.

### Autoplay & Motion

- **Autoplay**: on by default.
- **Autoplay Delay**: default 3000ms.
- **Transition Speed**: default 600ms.
- **Transition Easing**: **Ease In-Out** (default), **Linear**, **Ease**, **Ease In**, **Ease Out**.
- **Infinite Loop**: on by default.
- **Right to Left**: off by default. Sets the carousel to `dir="rtl"`.

### Interaction

- **Drag / Swipe**: on by default.
- **Center Active Slide**: off by default. Keeps the active slide centered with a peek of the slides beside it.
- **Center Mode Style**: **Classic** (default) or **Highlighted**. Highlighted scales the active slide up and dims the others.
- **Center Peek**: default 70px. Applies to classic center mode.
- **Custom Cursor**: off by default.
- **Cursor Style**: **Grab** (default), **Pointer**, **Move**, **Default**, **Pizza**, **Burger**.

### Arrows & Dots

- **Show Arrows**: on by default.
- **Arrow Layout**: **Overlay** (default) or **Alongside**.
- **Previous Arrow Icon** and **Next Arrow Icon**: icon pickers.
- **Show Dots**: off by default.
- **Pagination Style**: **Dots** (default) or **Numbers**.

## Content tab: Image Carousel Item (each slide)

### Content

- **Image**, **Image Alt Text**.
- **Title** and **Subtitle**.
- **Show Button**: off by default. Then **Button Text**, **Button Link URL**, **Open Button Link in New Tab** (off by default) and **Button Icon**.

### Settings

- **Card Preset**: **Custom (manual)** (default), **Overlay Gradient**, **Boxed Card**, **Minimal**, **Hover Reveal**.
- **Content Position Type**: **Normal** (default) or **Over Image**.
- **Content Position**: **Top** or **Bottom** (default). Normal type only.
- **Content Text Alignment**: **Left** (default), **Center**, **Right**.
- **Content Width**: default 100%.
- **Content Horizontal Placement**: **Center** (default), **Left**, **Right**. Over Image only.
- **Content Horizontal Offset** and **Content Vertical Offset**: default 0px.
- **Content Vertical Placement**: **Center** (default), **Top**, **Bottom**. Over Image only.
- **Image Hover Animation**: **None** (default), plus Zoom In, Zoom Out and a list of animation effects such as Pulse, Bounce, Shake, Tada and Slide In Up.

## Design tab: Advanced Carousel (parent)

- **Arrow Style**: Arrow Icon Color, Arrow Background, Arrow Height and Width (44px), Arrow Icon Size, Arrow Corner Radius, Arrow Skew.
- **Arrow Border**: Arrow Border Width, Arrow Border Color, Arrow Border Style.
- **Arrow Position**: Arrow Horizontal Offset, Arrow Vertical Position, Arrows Vertical Edge, Arrows Horizontal Edge, Gap Between Arrows, Center the Arrows.
- **Dot Style**: Dot Color, Active Dot Color, Dot Height, Dot Width, Active Dot Width, Dot Corner Radius.
- **Number Style**: Number Color, Number Size, Active Number Color.
- **Dot Position**: Alignment, Dots Spacing Top, Dot Spacing.
- **Carousel Spacing**: Spacing Top, Spacing Bottom.

## Design tab: Image Carousel Item

- **Image**: Image Height (auto by default) and Image Border.
- **Content**: Content Padding and Content Background.
- **Overlay**: Overlay toggle (off by default), Speed, Icon, Icon Color, Icon Size, Overlay Color, Icon Opacity.
- **Title**: font settings and Title Spacing Bottom.
- **Subtitle**: font settings.
- **Button**: Spacing Top, Text Color, Background Color, Text Size, Border Width, Border Color, Corner Radius, Padding, Margin.

## FAQ

### Does it work in Divi 4?

Yes. A Divi 4 version exists (shortcodes `torq_carousel` and `torq_carousel_child`). This page describes the Divi 5 settings.

### What library powers the carousel?

The Divi 5 render code outputs a Swiper container and passes the settings to Swiper as a JSON config.

### Can I show a different number of slides on tablet and phone?

Yes. Slides to Show supports responsive values in the builder, so you can set different counts per device.

### How do Vertical Direction and Variable Slide Width affect the other settings?

With Vertical Direction on, the carousel shows one slide at a time along the vertical axis. With Variable Slide Width on, Swiper sizes each slide from Slide Width, and Slides to Scroll is ignored. Both are set in the render config (`CarouselEngine.php`).