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

# Divi Video Carousel

The **Divi Video Carousel** module, part of the **Divi Carousel PRO** plugin, formerly known as **Wow Carousel Pro**, allows you to showcase videos in an interactive carousel layout. It supports YouTube, Vimeo, and self-hosted videos, with advanced controls for playback, layout, animations, and responsive behavior. This module is ideal for portfolios, tutorials, testimonials, and media-rich sections within Divi.

### **Add New Item**

Use this option to add individual video slides to the carousel. Each carousel item has its own **Content**, **Settings**, and **Design** tabs, allowing per-item customization.

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

This tab defines the core content and video source for each carousel item.

### **Content**

1. **Video Title** – Defines the title text for the video slide.
2. **Overlay Image** – Sets a thumbnail image that appears before the video is played.
3. **Image Alt Text** – Improves accessibility and SEO for the overlay image.
4. **Trigger Element** – Select how the video is triggered: Icon, Text, or Icon & Text.
5. **Video Type** – Choose the video source: YouTube, Vimeo, or Custom Upload.
6. **Video URL** – Enter the URL of the video or the self-hosted video file.

> **NOTE: Please correct way copy and insert the video URLs.**
> 
> Go to **YouTube** or **Vimeo** and copy the video URL from the browser's address bar.

![Video module 1 1024x701](https://divipeople.com/wp-content/uploads/2025/11/video-module-1-1024x701-1.png)

### **Carousel Item → Settings Toggle**

Controls interaction effects and animated elements for the video trigger.

1. **Use Animated Icon** – Enables or disables an animated play icon.
2. **Animated Wave Color** – Sets the color of the animated wave effect surrounding the icon.

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

The Design tab allows full visual customization of individual carousel items.

### **Title Text**

Controls typography, color, spacing, and alignment of the video title.

### **Image**

Adjusts styling for the overlay image, including borders, filters, and effects.

### **Icon**

Customizes the play icon appearance, including size, color, and hover behavior.

### **Text**

Styles the trigger text used with text or icon-and-text triggers.

### **Popup**

Controls the appearance of the video popup or lightbox.

### **Sizing**

Manages width, height, and responsive sizing of the carousel item.

### **Spacing**

Adjusts padding and margin around individual items.

### **Border**

Adds borders with customizable width, color, and radius.

### **Box Shadow**

Applies shadow effects to enhance depth and separation.

### **Filters**

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

### **Transform**

Applies transform effects like scale, rotate, or translate.

### **Carousel Settings**

The Carousel Settings toggle controls the global behavior and motion of the carousel.

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

Defines the primary functionality and responsive behavior of the carousel.

1. **Animation Speed** – Sets the slide transition speed in milliseconds.
2. **Autoplay** – Enables or disables automatic slide rotation.
3. **Autoplay Speed** – Controls the delay between autoplay transitions.
4. **Navigation & Pagination** – Displays navigation arrows, pagination dots, both, or none.
5. **Use Fixed Width Slide** – Keeps slides at a fixed width across screen sizes.
6. **Slides To Show** – Controls how many slides are visible per device (responsive).
7. **Slide Spacing** – Sets spacing between slides.
8. **Apply Spacing on First & Last Item** – Adds spacing to edge slides.
9. **Infinite Looping** – Enables continuous looping of carousel items.

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

Provides advanced controls for interaction, performance, and layout behavior.

1. **Sliding Direction** – Left to Right, Right to Left, or RTL-compatible direction.
2. **Sliding CSS Transition** – Linear, Ease-In, or Ease-In-Out animation style.
3. **Lazy Loading** – Loads slides only when needed for improved performance.
4. **Lazy Loading Type** – Progressive or On-Demand loading.
5. **Auto Height** – Automatically adjusts height based on slide content.
6. **Swipe** – Enables touch swipe navigation on mobile devices.
7. **Pause on Hover** – Pauses autoplay when hovered.
8. **Items to Scroll** – Number of items scrolled per interaction (responsive).
9. **Vertical Mode** – Displays the carousel 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 for interaction.
13. **Wrapper Spacing Top** – Adds top spacing in pixels.
14. **Wrapper Spacing Bottom** – Adds bottom spacing in pixels.
15. **Open Image in Lightbox** – Opens overlay images in a lightbox.

## **Design Tab**

The Design tab controls the global visual appearance of the Video Carousel module.

### **Navigation**

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

### **Pagination**

Customizes pagination dots, including spacing, color, and active state.

### **Text**

Controls typography and styling for text elements across the carousel.

### **Sizing**

Adjusts overall module dimensions and responsive behavior.

### **Spacing**

Manages padding and margin for the entire carousel.

### **Box Shadow**

Adds shadow effects to the carousel container.

### **Filters**

Applies global CSS filter effects to the module.

### **Transform**

Adds transform animations such as scaling or movement.

### **Animation**

Controls animation effects applied to carousel elements.