In this guide, we will show you how to use the Video Carousel Widget from the Unlimited Elements plugin. This widget lets you display multiple videos in a sleek, swipeable slider with smooth navigation. It is ideal for showcasing video galleries, tutorials, testimonials, or promotional clips in a modern, interactive, and visually engaging way.
Let’s explore the customization options available in the Video Carousel Widget for Elementor below.
Add a Free Video Carousel to Elementor
Add a Free Video Carousel Widget to an Elementor Page
Elementor Video Carousel Widget General Settings
Layout Type
Determines how the videos are displayed. Controls the overall layout structure.
Transition Duration (ms)
Sets the time (in milliseconds) it takes for the carousel to transition between videos.
Direction
Controls the direction of the carousel's animation/swipe.
Autoplay Center Video
If enabled, the main, centered video in the carousel will start playing automatically.
Autoplay All Videos
If enabled, all videos in the carousel may attempt to start playing automatically.
Mode
Defines the trigger for playing the videos.
Enable Sound
Controls whether the video sound is enabled upon autoplay or interaction.
Show Lightbox on Click
If enabled, clicking on a video thumbnail will open the video in a modal/lightbox overlay rather than playing it directly in the carousel.
Item Image Size
Determines the maximum size/resolution of the thumbnail image used for each video item in the carousel.
Items Source
This is the main control that determines where your expanding card content comes from. You can choose to
Items – Add content manually within the widget settings.
Posts – Use blog articles or post content.
WooCommerce Products – Display products from your WooCommerce store.
ACF Custom Field – Pull data from custom fields created using Advanced Custom Fields.
Gallery – Show images from a WordPress image gallery.
Terms – Use taxonomy data such as categories, tags, or custom terms.
Users – Display information about registered WordPress users.
Menu – Use items from WordPress navigation menus.
JSON or CSV – Import and display structured content from external JSON or CSV files.
RSS – Pull content from an RSS feed.
Instagram – Connect to and display content from your Instagram account.
API Integrations – Connect to external APIs for advanced content feeds.
Debug – Show Input Data
A helpful troubleshooting option. When enabled, it displays the raw data being received from the selected Items Source.
Show Overlay
Controls whether an overlay (often a play button or darkened layer) appears on top of the video thumbnail.
Show Overlay On
Determines on which devices the overlay will be visible (e.g., All Devices, Desktop, Tablet, Mobile).
Show Overlay Icon
Controls whether an icon (like a play symbol) is displayed within the overlay.
Overlay Icon
Allows you to choose or customize the specific icon displayed on the overlay.
Show Icon Ripple Effect
If enabled, an animated ripple effect will emanate from the overlay icon when interacted with or displayed.
Show Button
Controls the visibility of an additional button, likely related to the video or its functionality.
Loop
If enabled, the carousel will continuously loop back to the beginning after reaching the last item.
Autoplay
If enabled, the carousel will automatically advance through its slides without user interaction.
Number of items
Sets how many carousel items are visible at once.
Transition Speed
Defines how quickly the carousel slides transition between items, in milliseconds.
Autoplay Interval
When Autoplay is enabled, this sets the delay (in milliseconds) before the carousel advances to the next slide.
Margin between slides
Sets the spacing (in pixels) between individual slides in the carousel.
Slides To Scroll
Determines how many slides advance at once when the carousel transitions.
Transition Easing
If enabled, this allows for different animation curves (easing effects) during slide transitions for a smoother or more dynamic feel.
Autoplay Hover Pause
If enabled, the autoplay feature will pause when the user's mouse hovers over the carousel.
Center
If enabled, the carousel will attempt to center the active slide(s) in the display area.
Change On Click
If enabled, clicking on a non-active item in the carousel will make it the active, visible item.
Scroll To Head
If enabled, the browser will automatically scroll to the top of the widget's section when a new item is activated or changed in the carousel.
Stage Padding Type
Controls the type of padding applied to the carousel stage, which can affect how items at the beginning/end are displayed.
Set Active Mode On Mobile
If enabled, specific 'active' display modes or behaviors will be applied when the carousel is viewed on mobile devices.
Mouse Drag
If enabled, users can drag the carousel slides with their mouse pointer.
Touch Drag
If enabled, users can drag the carousel slides using touch gestures on touch-enabled devices.
Enable Mouse Wheel Control
If enabled, users can navigate the carousel slides using their mouse scroll wheel.
Hover Transition Duration (ms)
Sets the duration (in milliseconds) for any hover-related transitions or effects on carousel items.
Show Arrows
Controls the visibility of navigation arrows (e.g., left/right arrows) on the carousel.
Dot Each Item
If enabled, there will be a navigation dot for every individual item in the carousel, rather than perhaps groups of items.
Title
Sets the descriptive title for this individual item.
Thumbnail
Allows you to upload or select an image to be used as the video thumbnail.
Thumbnail Size
Determines the display size or resolution of the selected thumbnail image.
Video Source
Specifies where the video for this item is hosted (e.g., Self Hosted, YouTube, Vimeo).
Video URL
Input field for the URL of the video associated with this item (e.g., MP4, WEBM, OGV link).
Show Custom Overlay Icon
Toggles whether a custom overlay icon can be set specifically for this item, overriding global settings.
Elementor Video Carousel Widget Style Settings
Height Type
Determines how the height of the slide is defined (e.g., Ratio, Fixed, etc.).
Ratio
If Height Type is set to Ratio, this defines the aspect ratio of the slide (e.g., width/height).
Slide Radius
Controls the roundness of the slide's corners (Top, Right, Bottom, Left).
Slide Padding
Sets the internal spacing around the content within the slide.
Vimeo Video Scale (%)
Adjusts the scale (zoom level) of Vimeo videos within the slide, in percentage.
Normal / Hover / Active (tabs)
Allows for applying unique styles to the slide's default state (Normal), when hovered over (Hover), and when selected/playing (Active).
Slide Background Color
Sets the background color for the slide.
Slide Shadow
Allows you to add and customize a shadow effect for the slide.
Slide Border Type
Defines the style of the border around the slide (e.g., Solid, Dashed, Dotted, None).
Slide Border Width
Sets the thickness of the border around the slide for each side.
Slide Opacity
Controls the transparency level of the entire slide, from 0 to 100.
Overlay color
Allows you to choose the background color for the overlay.
Overlay Opacity Normal
Controls the transparency level of the overlay when it is in its normal, default state, from 0 to 100.
Overlay Opacity Hover
Controls the transparency level of the overlay when a user hovers over it, from 0 to 100.
Icon Size
Controls the size of the play icon.
Icon Background Size
Controls the size of the background circle or shape behind the icon.
Border Radius
Controls the roundness of the background shape's corners.
Icon Color
Sets the color of the play icon itself.
Ripple Color
Sets the color of the ripple effect, if enabled.
Background Color
Sets the background color of the icon's container shape.
Icon Shadow
Allows you to add and customize a shadow effect for the icon.
Box Shadow
Allows you to add and customize a shadow effect for the icon's background box/container.
Border Type
Defines the style of the border around the icon's background box.
Nav Arrow Spacing
Controls the distance or spacing of the navigation arrows relative to a fixed point.
Nav Arrow Position
Sets the vertical or horizontal positioning of the arrows within the widget area.
Nav Arrow Radius
Controls the roundness of the corners of the arrow's background container.
Nav Arrow Icon Size
Controls the size of the icon (like the caret or arrow symbol) inside the navigation button.
Nav Arrow Background Size
Controls the size of the background shape (button) of the arrow.
Normal / Hover (tabs)
Allows for applying unique styles to the arrow's default state (Normal) and when the user hovers over it (Hover).
Nav Arrow Background
Sets the background color of the arrow container/button.
Nav Arrow Icon Color
Sets the color of the arrow icon itself.
Nav Arrow Border Type
Defines the style of the border around the arrow container.
Nav Arrow Border Width
Sets the thickness of the border around the arrow container for each side.
Nav Arrow Border Color
Sets the color of the border around the arrow container.
Bullet Spacing
Controls the overall spacing or distance of the navigation bullets from a fixed reference point.
Bullet Space Between
Controls the specific distance between individual navigation bullets.
Bullet Alignment
Sets the horizontal alignment of the bullet group.
Normal / Active (tabs)
Allows for applying unique styles to the bullet's default state (Normal) and when it represents the current active slide (Active).
Bullet Size
Controls the size (width/height) of the individual navigation bullets.
Bullet Color
Sets the background or fill color of the navigation bullets.
Bullet Border Radius
Controls the roundness of the bullet's corners.
Video Carousel Widget Design Examples For Elementor
Here are some live use cases for the Video Carousel widget.
Video Carousel for Product.
Video Carousel for Hero.
Thank you for using the Video Carousel Widget for Elementor! This sleek and interactive tool, available in the Unlimited Elements plugin, allows you to showcase multiple videos in a smooth, swipeable slider. Designed for presenting video galleries, tutorials, testimonials, or promotional clips, it brings a modern and engaging viewing experience to your website. With its clean layout and effortless navigation, it enhances visual appeal and keeps users actively exploring your content. For support or inspiration, please don’t hesitate to get in touch or explore our demo.
