---
title: "Divi Card Carousel"
url: "https://divipeople.com/docs/divi-card-carousel-doc.md"
canonical: "https://divipeople.com/docs/divi-card-carousel-doc/"
published: "2025-11-20"
modified: "2026-01-23"
author: "Fahim Reza"
tags:
  - "Divi Carousel Pro"
---

# Divi Card Carousel

The **Divi Card Carousel** module, part of the **Divi Carousel PRO** plugin, formerly known as **Wow Carousel Pro**, allows you to display content-rich cards in a responsive carousel layout. Each card can include images, icons, badges, text, buttons, and optional tabbed content, making it ideal for feature highlights, services, team members, pricing details, or promotional content within Divi.

## **Content Tab**

The Content tab is where you manage individual card items and control the overall carousel functionality.

### **Add New Item**

Use this option to add cards to the carousel. Each card item includes its own **Content**, **Tab Content**, and **Design** tabs for granular control.

### **Carousel Item → Content Tab**

This tab defines the main content displayed inside each card.

### **Content Options**

1. **Use Icon** – Enables an icon at the top of the card.
2. **Upload Card Image / Add Image** – Adds an image to the card layout.
3. **Image Alt Text** – Improves accessibility and SEO for card images.
4. **Hide Badge** – Shows or hides the badge element on the card.
5. **Title Text** – Sets the main heading text for the card.
6. **Description** – Adds descriptive text to the card body.
7. **Use Button** – Enables a call-to-action button within the card.

### **Carousel Item → Tab Content Tab**

This tab controls the content displayed when the card tab feature is enabled.

### **Notice**

The fields in this section are only visible when the **Use Tab** option is enabled in the **Tab Settings** toggle.

### **Tab Content Options**

1. **Title** – Defines the tab title text.
2. **Subtitle** – Adds supporting text below the tab title.
3. **Thumbnail** – Displays a thumbnail image inside the tab.
4. **Add Image** – Uploads or selects an image for tab content.

### **Carousel Item → Design Tab**

This tab allows you to style individual card items visually.

**General**

Controls overall card layout appearance, alignment, and background styling.

**Image / Icon**

Customizes the size, color, and placement of images or icons used in the card.

**Overlay**

Adds and styles overlay effects applied to images or card backgrounds.

**Badge**

Controls badge design, including color, typography, and positioning.

**Texts**

Style titles, descriptions, and other text elements within the card.

**Button**

Customizes the appearance of the call-to-action button, including hover effects.

**Sizing**

Adjusts the width, height, and responsive sizing of card items.

**Spacing**

Controls padding and margin for card elements.

**Box Shadow**

Applies shadow effects to enhance depth and separation.

**Transform**

Adds transform effects such as scaling or movement animations.

### **Carousel Settings**

The Carousel Settings toggle manages the global behavior and interaction of the card carousel.

### **Carousel Settings → General Tab**

Defines the primary motion, layout, and responsiveness of the carousel.

1. **Animation Speed** – Controls slide transition speed.
2. **Autoplay** – Enables automatic slide rotation.
3. **Autoplay Speed** – Sets the delay between autoplay transitions.
4. **Navigation & Pagination** – Displays arrows, dots, both, or none.
5. **Use Fixed Width Slide** – Maintains a consistent slide width.
6. **Slides To Show** – Sets the number of visible cards per device.
7. **Slide Spacing** – Adjusts spacing between cards.
8. **Apply Spacing on First & Last Item** – Adds spacing to edge items.
9. **Infinite Looping** – Enables continuous looping of slides.

### **Carousel Settings → Advanced Tab**

Provides advanced behavior, performance, and interaction controls.

1. **Sliding Direction** – Controls slide direction, including RTL compatibility.
2. **Sliding CSS Transition** – Defines animation easing style.
3. **Lazy Loading** – Loads card items only when needed.
4. **Lazy Loading Type** – Progressive or on-demand loading.
5. **Auto Height** – Adjusts height dynamically based on content.
6. **Swipe** – Enables touch swipe navigation.
7. **Pause on Hover** – Pauses autoplay when hovered.
8. **Items to Scroll** – Number of cards moved per scroll action.
9. **Vertical Mode** – Displays cards vertically instead of horizontally.
10. **Center Mode** – Highlights the center card.
11. **Wait For Animate** – Prevents overlapping animations.
12. **Use Custom Cursor** – Enables a custom cursor effect.
13. **Wrapper Spacing Top** – Adds top spacing around the carousel.
14. **Wrapper Spacing Bottom** – Adds bottom spacing around the carousel.
15. **Open Image in Lightbox** – Opens images in a lightbox view.
16. **Equalize Item Height** – Ensures all cards maintain equal height.

### Tab Settings

This toggle controls the optional tab-based layout within the Card Carousel.

1. **Use Tab** – Enables tab functionality for card items.
2. **Hide Tab on Mobile** – Hides tabs on smaller screens.
3. **Select Tab Elements** – Choose which elements appear in tabs: Title, Subtitle, Thumbnail.
4. **Tab Items** – Manages tab entries for the carousel.
5. **Item Spacing** – Controls spacing between tab items.

## **Design Tab**

The Design tab controls the overall visual styling of the Card Carousel module.

### **Navigation**

Styles carousel navigation arrows, including size, color, and hover effects.

### **Pagination**

Customizes pagination dots for consistency with your site design.

### **Tab Style**

Controls the appearance of the tab container and layout.

### **Tab Elements**

Style individual tab elements such as titles, subtitles, and thumbnails.

### **Text**

Applies typography and color styling across text elements.

### **Sizing**

Adjusts module dimensions and responsive behavior.

### **Spacing**

Controls padding and margin for the carousel container.

### **Box Shadow**

Adds depth through shadow effects.

### **Filters**

Applies CSS filters such as brightness or contrast.

### **Transform**

Adds transform animations for dynamic visual effects.

### **Animation**

Controls animation effects applied to carousel elements.