Introducing Media Carousel: Beautifully Showcase Your Images and Videos

Introducing the Media Carousel widget. Create carousels and sliders that beautifully showcase your images and videos.

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 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 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!

Liked This Article?

We have a lot more where that came from! Join 482,910 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

101 Responses

  1. YES!!!!
    I’ve been hoping for this big time!!
    BUT.. any chance we can have Title & Captions per image?
    PLEASE ooooh please please please?!

    THX!!

      1. One last point from me 🙂 ideally we’d have control whether the text was on the image (like you did with your Slides widget)… or the option to have the text area BELOW the image and thumbs… I make a lot of artist and photographer sites and they never ever want anything on their images. THX!!!!

  2. Stop it already. I’m tired with all these updates. My head is spinning. These things you keep adding bring so much value and look so great, you make me want to go back and rebuild every page I’ve ever made. My ADD is getting out of control.

  3. hello, you have a new media carousel… how do i update each new element in pro version once i already have it installed on the website? do i delete the plugin and re-install it? please answer. thanks

  4. This great news but would like to have an aditional slide navigation option: A lineup of Icons+text containing small boxes instead of thumbnails beneath the slider. Each of the boxes will be mapped to a single slide.
    Please.

  5. Great addition to the family…! 🙂 is possible to integrate with WooCommerce and display products using this carousel…? Awsome work guys…!

    1. Great question! The Image Carousel works with WordPress’s Gallery, so you select a few images from the media library and this way create the carousel. For the Media Carousel, you need to select single images.

  6. Great news to hear that it has a separate custom URL for each slide. But you need to implement one more thing to become a perfect component, which is very useful to photographers and other artists: since each slide has its own URL, if the user shares that slide/url, the Image Carousel should set the Open Graph Protocol tags in order for the post to show the photo that the user is trying to share. Otherwise, is quite annoying not to be able to post the same image the user wanted to share.

  7. Agree, and I also was hoping for the feature to have ability to get/pull photos and videos from popular social media like Instagram, Pinterest and Flickr.

  8. Most or all of these options fail to provide the user with a way to stop the moving graphics. User tests show again and again that reading comprehension on a page is lower when images can’t be stopped. I understand that these sliders look really nice. But that doesn’t justify a user-hostile interface. Give users the choice.

      1. I got it right. I said “User tests show again and again that reading comprehension on a page is lower when images can’t be stopped.” When I said “stopped” I meant “stopped,” not paused. These studies have shown that the video-game-as-reading approach is unacceptable. Users should not be compelled to continually beat down the page’s attempt to re-start graphical movement. There should be a visible and obvious way to STOP the graphical movement.

        I have a deep and successful background in content marketing. I don’t want my client’s users to have to fight the page, particularly when numerous studies have shown reading comprehension goes down in such situations.

          1. For my understanding, the best way to use carousels and sliders (content marketing wise) is not to use automatic slider/carousel movement because it distracts the readers’ attention. Rather let the site visitor to control what he wants to press in order to reveal/explore the content that is implied under the next slide navigation button. I think this is what Mark Smith means by his kind remark about your awsome new feature. I think that if you guys will be willing to go the extra mile and add a button navigation (containing icon and text) to arrow/dots/thumbnails navigation you will sure be the next candidates for the next Nobel prize 🙂

  9. I started with Beaver Builder but I am sooo glad I switched to Elementor! You guys are amazing and the speed you come up with new widgets is unbelievable! Would it be possible to make an area where users can share their templates?

  10. Great addition!. One request if possible… the ability to have variable width and fixed height. I was previously using the image carousel with images that were all 500px in height but varied in width and this is what happened: https://cl.ly/2v261F1S2l10. I even emailed support about this. While the new update for the media carousel semi fixes this because you can specify a “cover” to fill each slide, it still cuts the slide off and fixes the width to however many slides you select for the viewport.

    For reference if you check out how Flickity does it with their carousel: https://codepen.io/desandro/pen/raJNdm – Variable width same height.

    Thanks for the update though gets me half way there without having to hunt down or code a custom plugin. 🙂

  11. Another wonderful addition to the pro family. Please also add caption for each image as it is also available for image Carousel.

  12. Awsome feature!!!
    I love you guys..

    Just a small fix:
    On mobile, the overlay is activated on touch (makes sense so far), but in order to go back and clear the overlay the user has to press on another media.
    It makes more sense that when a user clicks on the overlay, it sets it off again.

    In other words: that clicking on a media on touch screens will toggle the overlay.

    keep on rocking!!!!!!!

  13. Hey, guys. When I use videos on my carousel pro, how can I display the “first frame” or cover of the video (the same way it happens in the video plug in that just repeats the youtube cover) instead of having to choose a image for it?

  14. Hi Ben,

    Great update, which, to my pleasure, fixed several issues on the latest Firefox with sections showing full-width instead of being contained like in the demo screenshots and some problems with height (e.g. YouTube videos).

    Now, except for 2 (see the linked screenshots, below), every single demo shows up correctly even on the latest Firefox, yay!
    Could you please ask your designers to always test with the latest Firefox, too? Thanks!
    Keep up the great work!
    Screenshots of the 2 remaining cases where the demo doesn’t show up correctly on the latest Firefox:
    https://s26.postimg.org/6hg55j2e1/20170927_143057.jpg
    https://s26.postimg.org/9ct8ce6e1/20170927_143100.jpg

  15. I don’t oppose them. I’m hoping for a development team that’s knows the basics of UI design. Just reading the classic “Don’t Make Me Think” by Steve Krug helps inform on this issue. Sliders are not bad, but sliders that don’t make it obvious to all users how to stop them are.

  16. Ben, awesome feature… needed it badly. One issue I’m having, when you bring it into a lightbox there is no video controls to rewind or fast forward the video. Is there CSS that can handle this?

  17. This is so great to see. I know that other plugins have some options like this, so the more the merrier. This looks like I can change up my homepage a bit to how I wanted it originally! Yesssss.

    Oh and love seeing one of my architecture photos in a demo of the features! Amazing 🙂

  18. Ex-BB user here… now Elementor Pro user. First, I just want to say that your crew’s pace of development is to be commended. Huge interweb Hi-5s all around for the effort you guys are putting in.

    Now for my question; Any way to have grid of multiple slideshow thumbnails underneath the large carousel image rather than just one row? I build a fair amount of photography/photographer based sites and that would be super helpful. Something similar to Rama’s site http://www.ramalee.co.uk would be awesome.

    I’m not opposed to coding so if it can be handled that way in the interim please point me in the right direction and I’ll try and manage it that way.

    Thanks!

  19. Oh I forgot to mention that I’m using Wonderplugin Gallery to diplsy our videos. This plugin do have title/captions and best of all is also able to take YouTube playlists as sources. If your new widget will be able to do all of that I’ll will consider it as a total replacement of Wonderplugin Gallery.

    Exemples:
    https://www.domodeco.fr/les-videos-domodeco (Manual YouTube videos)
    https://www.domodeco.fr/les-videos-domodeco/visites-privees (YouTube playlists as sources)

    Thanks

  20. Sounds great – havn’t been able to check it out yet. Would love to have a podepisode/audiofile coursel where you can display pod episodes in lightboxes with covert. Would this update be able to help me with that?

  21. How does Elementor compare to Themify? I don’t want to be negative here but I’ve been watching your blog and it seems that you have to buy every single add-on which Themify (mostly) gives free to its members. It also seems that your licensing works out much more expensive than Themify.

    Fair disclosure: I use Themify. It has its quirks but generally works well. However some clients don’t like the price tag after already paying for development. Of course you should be paid for your work, but I’m just wondering what the justification is for your pricing: you’re twice as expensive for unlimited sites than Themify, and they give the many of their paid-for add-ons to their lowest plan ($79 unlimited sites) to their customers for free?

    Of course I wouldn’t bother writing this if I didn’t think your system looks interesting, it’s just the pro price is a bit off-putting if you’ve shopped around.

  22. Thanks Ben, but is there somewhere I can see a comparative review, or are you able to expand a bit on why your system is better? Please understand I’m not trying to be difficult here, if I shift clients that I’ve implemented Themify as their page builder/editor over to Elementor, I need to justify it with a bit more detail

  23. LOL @Ben Pines. If I may I can chime in here. I used themify and it was great. It still is… I do like it a lot but…

    Themify Builder has content lock in, so if you ever disable the builder all your work is lost. I find that they release things really slow other than their discount sales. Then if you want a bit more for the builder you are adding plugins. Plugin for slider pro, plugin for image pro granted they are included with your membership you are not paying anything extra but that’s additional plugins you have to manage. I personally like to use a little plugins as possible.

    The builder prelayouts and community layouts are ..meh I rather build it myself which is something I want to avoid. I would like to import a layout change up copy, images, and so on but again their layouts …meh

    Since using Elementor the frontend builder is much faster. I never liked to use frontend builder because they are slow. Elementor change that the layouts thus far … much better. Elementor seems to be getting better by the day. I just hope they can continue to improve their product.

  24. Hi Ben, for some reason the videos do not upload. I retried the same video you tube URL on the simple video widget and it loaded no problem. What am I dont wrong with this carousel?

  25. I put it on “video” , put in the link where it says “video link” and nothing shows on the slide. I tried both carousel skin and slide skin and it still did not work.

  26. Hello, i use de media carousell in local machine to show our videos but it its seems not work for me, i put de url video of youtube in the box and it causes that appears the play icon in the thumbnail of the item carousell but when i swich on the play icon, its open an static image but dont reproduce any video

    The web is not published yet because we sre design it in local machine

  27. I’m having the same issue and can’t find any troubleshooting blogs that explain how to solve the issue. Tried contacting support and I just get a message that says “No one is here right now” :/

Leave a Reply