How to Create Video Slider in Elementor Using the Carousel Widget

Benefits of Adding a Video Slider to Your Website

1. Higher Visitor Engagement

Video content captures and holds attention far more effectively than static images or text alone. A video slider on your homepage, landing page, or product page immediately draws the eye and encourages visitors to interact with your content. The sliding/carousel format adds an additional layer of interactivity — visitors either wait for the autoplay or actively click to explore the next video — both behaviors signal deep engagement.

2. Showcase Multiple Videos in a Compact Space

A single embedded video takes up a fixed amount of vertical space on your page. A video slider lets you present four, six, or even ten videos within the same spatial footprint — perfect for product demo libraries, tutorial collections, testimonial video walls, portfolio reels, or course preview sections. Visitors get a rich content experience without needing to scroll through a long, cluttered page.

3. Better Visual Storytelling

A video slider lets you guide visitors through a deliberate narrative sequence. You can open with a brand video, transition to a product demonstration, follow with customer testimonials, and close with a call-to-action slide — all within a single, cohesive carousel experience that tells your brand’s story from first impression to conversion moment.

4. Improved Time on Page and Reduced Bounce Rate

Pages with video content typically see significantly lower bounce rates and longer session durations. When visitors encounter an auto-playing or attention-grabbing video slider, they are far more likely to stay and explore than they would be on a text-heavy or image-only page. Search engines like Google factor dwell time and bounce rate into their ranking signals, making a compelling video slider an indirect SEO asset.

5. Professional, Modern Aesthetic

A well-designed video slider immediately elevates the perceived professionalism and quality of a website. It signals to visitors that the brand is modern, polished, and takes its digital presence seriously. This is particularly impactful for creative agencies, photographers, videographers, fitness studios, SaaS products, and any business where visual presentation is a direct reflection of service quality.

6. Increased Conversion Opportunities

Video sliders are not just decorative — each slide can contain a video paired with a headline, description, and call-to-action button. This means every slide in your video slider is a potential conversion touchpoint. Rather than relying on a single CTA somewhere on the page, a video slider can present multiple conversion opportunities in sequence — for different products, services, or audience segments.

7. Fully Mobile-Responsive

Elementor’s Carousel widget is built to be responsive out of the box. Video sliders created with the Carousel widget automatically adapt to different screen sizes — desktop, tablet, and mobile — ensuring your visitors get a polished experience regardless of the device they are using. Given that the majority of web traffic now comes from mobile devices, this responsiveness is essential.

8. No Additional Plugin Required

Many WordPress website owners install separate slider plugins to create sliders, adding unnecessary bloat, potential plugin conflicts, and maintenance overhead to their site. With Elementor’s built-in Carousel widget, you can create a fully featured, professional video slider without any additional plugin — keeping your site lean, fast, and conflict-free.

What is the Elementor Carousel Widget?

The Elementor Carousel widget is a native Elementor widget introduced in Elementor version 3.14 that allows you to build fully customizable, multi-slide carousels directly within the Elementor page builder. Unlike older slider widgets that only supported images, the Carousel widget supports nested elements — meaning each slide is an Elementor container that can hold any combination of Elementor widgets, including the Video widget, Image widget, Heading widget, Text Editor widget, Button widget, and more.

This nested element architecture is what makes the Carousel widget so powerful for creating a video slider. Instead of being limited to a simple image-and-text layout, you can design each slide of your carousel to contain an embedded video (YouTube, Vimeo, self-hosted, or Dailymotion), a slide title, a supporting description, and a CTA button — all styled independently and laid out exactly as you want.

The Carousel widget is available in Elementor and provides an extensive set of customization options across its Content, Style, and Advanced tabs — covering everything from the number of visible slides and autoplay behavior to navigation arrow styling, pagination type, background settings, border radius, padding, and responsive controls for different screen sizes.

Steps to Create a Video Slider in Elementor Using the Carousel Widget

Follow this complete step-by-step guide to build a professional video slider in Elementor using the Carousel widget.

Step 1: Open Your Page in Elementor

Log in to your WordPress dashboard. Navigate to the page where you want to add the video slider. Click Edit with Elementor to open the page in the Elementor editor. If you are creating a new page, go to Pages > Add New, give the page a title, and click Edit with Elementor.

Step 2: Add the Carousel Widget to the Canvas

1. In the Elementor left panel, search for ‘Carousel’ in the widget search bar
2. Drag the Carousel widget from the panel onto the canvas where you want the video slider to appear
3. The Carousel widget will load with three default slides, each containing an empty container
4. You will see the widget settings open automatically in the left panel

Step 3: Set the Number of Slides and Display Options

In the Content tab on the left panel, configure the basic layout:

• Slides on Display — Set this to 1 for a full-width video slider where one video is visible at a time. Set to 2 or 3 if you want to show multiple video thumbnails simultaneously.
• Slides on Scroll — Keep this at 1 so each navigation click advances by one video at a time.
• Equal Height — Enable this to ensure all video slides are the same height, creating a clean, uniform slider appearance.

Step 4: Add a Video Widget to the First Slide

5. Click on the first slide container in the canvas to select it
6. In the Elementor panel, search for the ‘Video’ widget
7. Drag the Video widget into the first slide container
8. In the Video widget settings, choose your video source: YouTube, Vimeo, Dailymotion, or Self Hosted
9. Paste your video URL (e.g., your YouTube video link) into the Link field
10. Configure video options: enable or disable Autoplay, Mute, Loop, and Controls as needed
11. Optionally set an Image Overlay to display a custom thumbnail before the video plays

Step 5: Add a Title and Description to the Slide (Optional)

To make each slide more informative and conversion-focused, add supporting text elements below or beside the video:

12. Drag a Heading widget into the slide container below the Video widget
13. Type your slide title (e.g., the name of the video or a key benefit headline)
14. Drag a Text Editor widget below the Heading widget for a short video description
15. Optionally add a Button widget with a call-to-action (e.g., Watch Full Video, Learn More, Shop Now)

Step 6: Style the First Slide

With the slide container selected, you can customize its appearance:

• Set a slide background color, gradient, or image using the Style tab
• Add padding inside the container for breathing room around the content
• Add rounded corners using the Border Radius option for a modern look
• Adjust the Heading typography, color, and size to match your brand

Step 7: Duplicate the Slide for Additional Videos

16. In the Content tab, under Slides, locate the first slide item
17. Click the duplicate icon (copy icon) next to the first slide to create an identical copy
18. Repeat until you have as many slides as you need (e.g., 4-6 for a video library)
19. Click on each duplicated slide, then click on the Video widget inside it and update the video URL to point to a different video
20. Update the Heading and Text content for each slide to match the video

Duplicating slides saves time because the layout, styling, and widget configuration carries over — you only need to swap the video URL and update the text for each slide.

Step 8: Configure Autoplay Settings

In the Content tab, under the Settings sub-tab, configure autoplay behavior for your video slider:

• Autoplay — Toggle ON to have the carousel advance automatically. For a video slider, you may prefer to keep Autoplay OFF so visitors can watch each video without the slide changing mid-playback.
• Scroll Speed (ms) — If Autoplay is enabled, set the interval between slide advances in milliseconds. For video slides, use a longer interval (e.g., 8000ms = 8 seconds).
• Pause on Hover — Enable this so the carousel stops advancing when a visitor mouses over the slider. Highly recommended for video sliders.
• Pause on Interaction — Enable this so autoplay stops when a visitor clicks play on a video or interacts with any element in the slide.
• Infinite Scroll — Toggle ON to make the carousel loop continuously from the last slide back to the first.

Step 9: Configure Navigation Arrows

In the Content tab under the Navigation sub-tab:

• Arrows are enabled by default. You can disable them if you prefer a swipe-only slider.
• Click Previous Arrow and Next Arrow to customize the arrow icon — choose from Elementor’s built-in icon library or upload a custom SVG icon.
• Use the Horizontal and Vertical position controls to place the arrows exactly where you want them on the slider.

Step 10: Set Up Pagination

In the Content tab under the Pagination sub-tab, choose a pagination style:

• Dots — Classic dot indicators below the slider, one per slide. Good for sliders with fewer videos.
• Fraction — Displays current slide number and total (e.g., 2/6). Clean and informative for larger video collections.
• Progress Bar — A horizontal bar that fills as the visitor progresses through slides. Modern and visually appealing.
• None — No pagination. Best when you have arrows and do not want extra visual elements.

Step 11: Style Navigation and Pagination

Click the Style tab to customize the visual appearance of your slider’s navigation:

• Gap Between Slides — Adjust the space between slides. For single-video display, set this to 0. For multi-video display, a small gap (e.g., 20px) creates a clean grid-like separation.
• Arrow Icon Size and Color — Increase the icon size for better visibility and set arrow colors to match your brand palette.
• Arrow Background — Add a background color or shape behind the arrows for better contrast against video content.
• Pagination Dot Color — Customize the active dot color (should be your brand’s accent color) and the inactive dot color (usually a muted gray or semi-transparent tone).

Step 12: Adjust Responsive Settings

Click the responsive mode icons at the bottom of the Elementor panel (desktop, tablet, mobile) to preview and adjust your video slider for different screen sizes. You may want to change Slides on Display from 2 or 3 on desktop to 1 on mobile, and adjust padding, font sizes, and arrow icon sizes for smaller screens.

Step 13: Preview and Publish

Click the Preview button (eye icon) at the bottom of the Elementor panel to preview your video slider in the browser. Test the following:

• Do all video thumbnails and embeds load correctly?
• Do navigation arrows advance slides correctly?
• Does autoplay and Pause on Hover work as expected?
• Does the slider display correctly on mobile and tablet?
• Does infinite scroll loop correctly from last to first slide?

Once satisfied, click Publish (or Update) to save and publish your page with the new video slider.

Elementor Carousel Widget: Complete Features Reference

Here is a comprehensive reference table of every available setting in the Elementor Carousel widget:

Advanced Tab Features

In addition to the Content and Style tabs, the Carousel widget’s Advanced tab provides:

• Motion Effects — Add entrance animations or scrolling effects to the entire carousel widget (e.g., fade in, slide up) for a more dynamic page presentation.
• Responsive Visibility — Show or hide the carousel widget on specific device sizes (desktop, tablet, mobile) to serve different content to different screen types.
• Custom CSS — Add custom CSS rules directly to the widget for advanced styling beyond what the standard controls offer.
• Custom Attributes — Add custom HTML attributes to the widget wrapper for accessibility or JavaScript targeting purposes.
• Z-Index — Control the carousel widget’s stacking order relative to other page elements.

Creative Use Cases for Video Sliders in Elementor

1. Homepage Hero Video Slider

Replace a static hero banner with a dynamic video slider that cycles through your top brand videos, product launches, or key value propositions. Each slide can feature a different video with a unique headline, supporting text, and call-to-action button — turning your hero section into an immersive, converting experience.

2. Product Demo Video Carousel

On a product page or sales page, use a video slider to showcase different product features, use cases, or model variations. Each slide presents a focused video demonstration alongside the feature name and a short benefit description — helping visitors make informed purchase decisions without leaving the page.

3. Video Testimonial Slider

Build trust and social proof by creating a testimonial video slider where each slide contains a customer video review, their name, company, and a star rating. Video testimonials are dramatically more credible and persuasive than text reviews, and a well-designed slider keeps the page compact and professional.

4. Tutorial and Course Preview Slider

For online educators and coaches, a video slider is perfect for previewing course content. Each slide can show a short excerpt from a different lesson or module, paired with the module name and a brief description — giving prospective students a compelling taste of your course content before they commit to purchasing.

5. Portfolio or Showreel Slider

Agencies, filmmakers, photographers, and creative professionals can use a video slider as an interactive portfolio reel. Each slide showcases a different project or client work video, with the project name and category as supporting text. This creates a far more engaging portfolio presentation than a static grid of video thumbnails.

Frequently Asked Questions (FAQs)

1. Does the Elementor Carousel Widget Require Elementor Pro?

The Carousel widget is available in Elementor (it was introduced in version 3.14). However, some advanced features and widgets that you might add inside the carousel slides — such as the Video widget, Button widget, and other pro widgets — may require an active Elementor Pro subscription depending on your version and plan. The core Carousel widget functionality including slides, autoplay, navigation, and pagination is available in the free version of Elementor from version 3.14 onward. Always ensure your Elementor plugin is updated to at least version 3.14 to access the Carousel widget.

2. Can I Add YouTube and Vimeo Videos to the Elementor Carousel?

Yes. Elementor’s Video widget — which you place inside each Carousel slide — supports YouTube, Vimeo, Dailymotion, and self-hosted video files. Simply drag a Video widget into your carousel slide container, select your video source (YouTube, Vimeo, etc.) from the dropdown, and paste in the video URL. You can configure autoplay, mute, loop, and custom thumbnail settings for each video independently. This means your video slider can contain a mix of YouTube videos, Vimeo embeds, and self-hosted files within the same carousel.

3. How Do I Prevent the Carousel from Auto-Advancing While a Video is Playing?

To prevent the carousel from advancing to the next slide while a visitor is watching a video, enable both the Pause on Hover and Pause on Interaction options in the Carousel widget’s Content tab under Settings. Pause on Hover stops autoplay when the visitor’s mouse is over the carousel, and Pause on Interaction stops autoplay when the visitor clicks any element — including clicking the play button on a video. For the best user experience with a video slider, it is generally recommended to either disable Autoplay entirely or set a very long scroll speed (e.g., 15,000ms or more) combined with both pause options enabled.

4. How Many Slides Can I Add to the Elementor Carousel?

There is no fixed limit on the number of slides you can add to an Elementor Carousel. You can add as many slides as your content requires. However, from a user experience perspective, it is best practice to keep a video slider to between 4 and 8 slides. Too many slides can overwhelm visitors and reduce the likelihood of them viewing all the content. If you have a large video library, consider organizing videos into thematic sliders on separate sections or pages rather than creating one very long carousel.

5. Can I Display Multiple Videos Side by Side in the Elementor Carousel?

Yes. The Slides on Display setting in the Carousel widget’s Content tab controls how many slides are visible simultaneously. Set it to 2 to show two videos side by side, or 3 to show three. You can also use the Offset Slides setting to show partial slides on the sides, giving visitors a visual cue that there are more videos to scroll through. Keep in mind that the more slides you display simultaneously, the smaller each slide will be — so test your design on desktop and mobile to ensure the video size remains comfortably watchable. For mobile devices, you can override the Slides on Display value to 1 in the responsive settings.

Conclusion

A video slider is one of the most powerful visual elements you can add to a WordPress website — and with Elementor’s built-in Carousel widget, creating one has never been easier or more flexible. Whether you are building a homepage hero reel, a product demo library, a testimonial wall, or a course preview section, the Carousel widget gives you complete control over how your videos are presented and experienced.

The nested element architecture of the Carousel widget means you are not limited to a simple image-and-caption layout. Every slide is a fully editable Elementor container where you can combine video embeds with headings, text, buttons, icons, and any other widget — creating a rich, branded video slider experience with no coding required.

With features like autoplay with pause controls, multiple navigation and pagination styles, responsive adjustments for every screen size, and deep styling options for every visual element, the Elementor Carousel widget is everything you need to create a professional, high-impact video slider that keeps visitors engaged, builds brand credibility, and drives more conversions.

Open Elementor, drop the Carousel widget onto your canvas, add your first Video widget to a slide, and start building your video slider today.