Table of Contents
Create carousels and sliders that beautifully showcase your images and videos with Elementor's Media Carousel
Whether it’s a blog post, landing page or entire website – visual content always wins. This is why we’ve put great emphasis on our visual widgets in Elementor.
Now, comes a stylish new visual widget.
Introducing the Media Carousel widget!
The Media Carousel widget will take your images and videos to the next level of design. Please note that this is an additional and separate widget to the Image Carousel widget. This widget comes with 3 skins:
Carousel is the standard rotating carousel skin that shows a customized number of image or video slides per view.
Slideshow is a slider skin that displays one primary slide and small image thumbnails below.
Coverflow is a slider skin that shows a central slide in the front and two side slides in the back.
Get Media Carousel in Elementor Pro
Sliding Effects
Beyond the basic slide effect, the Carousel and Slideshow skins also let you choose between two additional sliding effects:
Fade Effect
3D Cube Effect
Carousel Options
The Media Carousel widget is highly customizable, allowing you not only to combine videos and images in the same carousel, but also use several other useful features that turn this widget into a powerful visual tool.
Media Size, Ratio & Space Between
Changing the width, height and space between slides is easy, so you can use different size images and have them display with the size of your choosing.
Custom Width
Regular carousels automatically display images in full width, with no option to set a custom width. In order to give you extra flexibility, we’ve added the option to scale the width of the carousel exactly how you want it.
Lightbox & External Link
Each image and video can either open to full-view using a built-in and customizable popup lightbox. You can also set a separate custom URL that each slide will link to.
Navigation
Browsing through the carousel is possible using arrows, dots, numbered fraction and progress bar. Each of these browsing features also has styling options of its own.
The Media Carousel includes the option to add arrows navigation, as well as bullets, fraction or progress pagination.
You can also set: Transition duration, Autoplay, Autoplay Speed, Add Pause on Interaction
Image Fit
Choose to display the images and videos as cover, contain or auto.
Cover: Media is set to be as large as possible to completly ‘cover’ the slide
Contain: Media is set to be contained so both width and height can fit inside the slide
Auto: Media is shown in its real size
Carousel Overlay
By setting an overlay to each slide, you can turn your carousel to an amazing showcase of your work.
This way, when the user hovers over the image or video, they can get a nice overlay explanation of the piece.
In this widget, you have either text or icon overlays.
The text overlay shows either the title, caption or description of the slide.
The icon overlay shows either a magnifying glass, plus, eye or link icon.
You can also set the animation of the overlay, and choose either a fade, slide in, out, left, right or zoom in animation.
Slideshow Thumbnails
For the thumbnails, you can control:
Thumbnails per view. The number of thumbnails that appear below the slide.
Thumbnails ratio. The ratio size setting for the thumbnails.
Space between thumbnails. Set the space between the thumbnails.
Mobile Responsive Carousel
As with our other widgets, Media Carousel and Slideshow come with full mobile responsive editing.
You can set the number of slides per view, as well as the height, width and space between for each device separately. Mobile users can also swipe to browse through the slides.
All these options make it easy to customize the mobile view of these widgets and make it 100% responsive.
Combining Videos and Images
In much the same way as Elementor’s own YouTube channel already has over 90 videos, many businesses have several videos that contribute a lot to convince potential customer to buy their product or service.
Using a video carousel is a great way to showcase your own videos. The Media Carousel and Slideshow widgets offer unique video advantages:
Easy load video. Video is loaded only when the user clicks to play the video. This reduces page load time and makes this widget super-fast.
Play button. Each video automatically gets a play button icon. This makes it easy for the user to distinguish between images and videos.
Video lightbox size and color. Customize the lightbox popup size and color background.
Get Media Carousel in Elementor Pro
By offering advanced design capabilities for each of the carousel widgets, you make sure you can create any image and video display you like, from portfolio carousels, logo sliders, video sliders and any other rotating image combination.
One More Thing... New Templates!
Want to see just how useful this widget is?
Check out our 3 stunning new templates that showcase this widget: Product landing page with logo slider, interior design landing page with image carousel and hotel landing page with image & video slider. Try them out and see how exactly how we created them.
Want an original Elementor T-shirt? Send us a comment with a link to a page template you created that utilizes this widget, along with your home address. We will choose the best template and send its designer a genuine Elementor T-shirt.
You can experiment creating portfolio carousels, logo sliders, video sliders and other rotating combinations. Good luck!
Looking for fresh content?
By entering your email, you agree to receive Elementor emails, including marketing emails,
and agree to our Terms & Conditions and Privacy Policy.
