Video Carousel Doc

The Video Carousel module 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.

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.

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.