---
title: "Content Carousel"
url: "https://divipeople.com/docs/divi-content-carousel-doc.md"
canonical: "https://divipeople.com/docs/divi-content-carousel-doc/"
published: "2025-11-20"
modified: "2026-04-30"
author: "Fahim Reza"
tags:
  - "Divi Carousel Pro"
---

# Content Carousel

The **Divi Content Carousel** module, part of the **Divi Carousel PRO** plugin, formerly known as **Wow Carousel Pro**, allows you to display flexible content elements such as images, videos, icons, text, and buttons inside a responsive carousel layout. Each carousel item can be fully customized, making this module ideal for showcasing features, highlights, announcements, or mixed media content within Divi.

## **Content**

The Content tab is where you create carousel items and configure how the carousel behaves across devices.

### **Add New Item**

This option allows you to add individual content items to the carousel. Each item includes its own **Content**, **Tab Content**, and **Design** tabs for detailed customization.

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

This tab defines the primary content displayed inside each carousel slide.

### **Content Options**

1. **Choose an Element** – Select the main element type for the slide: Image, Video, or Icon.
2. **Image Alt Text** – Improves accessibility and SEO for image-based slides.
3. **Title Text** – Adds a main heading to the slide.
4. **Subtitle Text** – Displays supporting text below the title.
5. **TinyMCE** – Allows rich text content with basic formatting.
6. **Use Button** – Enables a call-to-action button within the slide.
7. **Button Text** – Sets the label text for the button.
8. **Click Here** – Defines the clickable button behavior.
9. **Button Link** – Specifies the URL the button links to.
10. **Open Button Link in New Window** – Opens the button link in a new browser tab.

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

This tab controls the content displayed inside tabs when the tab feature is enabled.

> **Notice**
> These fields 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 within the tab.
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 customize the visual styling of individual carousel items.

**General**

Controls overall layout appearance, alignment, and background styling for the slide.

**Main Element**

Customizes the appearance of the primary element (image, video, or icon).

**Overlay**

Adds and styles overlay effects applied to the main element or background.

**Title & Subtitle**

Styles the typography, color, spacing, and alignment of titles and subtitles.

**Body Text**

Controls the design of content added via the TinyMCE editor.

**Heading Text**

Styles heading-level text used within the slide.

**Button**

Customizes button appearance, including colors, borders, and hover effects.

**Sizing**

Adjusts width, height, and responsive sizing of slide elements.

**Spacing**

Controls padding and margin for slide components.

**Box Shadow**

Applies shadow effects to create depth and separation.

**Filters**

Adds CSS filters such as brightness, contrast, or blur.

**Transform**

Applies transform effects like scaling, rotation, or movement animations.

### **Carousel Settings**

This toggle controls the global behavior and interaction of the carousel.

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

Defines the main animation, 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** – Determines the number of visible slides per device.
7. **Slide Spacing** – Adjusts spacing between slides.
8. **Apply Spacing on First & Last Item** – Adds spacing to edge slides.
9. **Infinite Looping** – Enables continuous slide looping.

### **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 the animation easing style.
3. **Lazy Loading** – Loads slide content only when needed.
4. **Lazy Loading Type** – Progressive or on-demand loading.
5. **Auto Height** – Automatically adjusts carousel height based on content.
6. **Swipe** – Enables touch swipe navigation.
7. **Pause on Hover** – Pauses autoplay when hovered.
8. **Items to Scroll** – Sets how many slides move per scroll action.
9. **Vertical Mode** – Displays slides vertically instead of horizontally.
10. **Center Mode** – Highlights the center slide.
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 slides have equal height.

### **Tab Settings**

This toggle manages the tab-based layout used alongside carousel items.

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

## **Design**

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

### **Navigation**

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

### **Pagination**

Customizes pagination indicators for consistent visual integration.

### **Tab Style**

Controls the appearance and layout of the tab container.

### **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 using shadow effects.

### **Filters**

Applies CSS filter effects to the module.

### **Transform**

Adds transform animations for dynamic visual presentation.