help center

On this page

Media Carousel widget

Last Update: January 30, 2024

Add the widget

media carousel icon Media Carousel widget 1

To access and use a widget:

  1. In Elementor Editor, click +.
    All available widgets are displayed.

  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

The Media Carousel widget lets you display a series of media items, like photos or videos, in a rotating format. You can easily create and customize carousels with different skin types, various transition effects, navigation controls, and design settings to enhance your site’s user experience and engagement.

Common use case

Ana is building a website for a renowned fashion brand. They want to showcase the latest collection in a captivating way. To achieve this, she uses the media carousel widget.

They created a carousel on the website featuring stunning model shots, each highlighting a different outfit or accessory from the collection.

media carousel Media Carousel widget 3

Additional use cases

  • Use the carousel to highlight ongoing promotions, discounts, or bundle offers
  • Showcase customer reviews, testimonials, or user-generated content in a carousel format.
  • Showcase logos of prominent clients or partners for portfolios.
  1. Add the Media Carousel widget to the canvas. For details, see Add elements to a page.
  2. In the Content tab, under the Slides section, choose Skin from the drop-down options. The widget includes three skin types: Carousel, Slideshow, and Coverflow.
    choose skin Media Carousel widget 5
    1. By default, the media carousel widget comes with five slides: Item #1, Item #2, Item 3, Item #4 and Item #5. You can add or delete these slides.
      media carousel default items Media Carousel widget 7
    2. To delete the default slide, click the x delete icon Media Carousel widget 9 icon.
      delete carousel item Media Carousel widget 11
    3. There are two ways to add a new slide:
      1. Click + Add Item.
      2. Click the Duplicate copy Media Carousel widget 13 icon next to one of the existing tabs. This will create an exact copy of the existing tab.
        add items to carousel Media Carousel widget 15
Note: Slides Options and Additional Options in the Content tab change based on your selected skin type. Let’s explore the settings available for each skin type

Carousel skin displays a rotating carousel that can display a set number of images or videos simultaneously.

  1. In the Skin field, from the drop-down menu, select Carousel.
    skin carousel Media Carousel widget 17
  2. In the Slides section, click the first slide labeled Item #1. Clicking the menu item in the panel opens up several options.
    open carousel slide Media Carousel widget 19
  3. Use the Type field to choose your media type: Image or Video.
    carousel item type Media Carousel widget 21
    1. To add a image to the carousel, click the 568165 Media Carousel widget 23 icon.
      add image to carousel Media Carousel widget 25
    2. Use the Link option to link images to their respective Media Files, add Custom URLs, or choose None.
      image link options Media Carousel widget 27

      If you’re adding a Custom URL:

      1. Click the ⚙️ to set the link to either open in a new window or to add rel=nofollow to the link.
      2. Use the Custom Attributes option to assign custom attributes to the link element. Use the | (pipe) for key-value separation and commas to separate pairs.
        link options 2 Media Carousel widget 29
  4. To add a video to the carousel, click the videoicon Media Carousel widget 31 icon and paste the video link into the Video Link field.
    video link Media Carousel widget 33
    Note: The lightbox feature is enabled by default for the video content. You can switch it off by going to its settings and unchecking the checkbox. Learn more about Lightbox.
  5. In the Effect field, choose between Slide, Fade, or Cube for the transition effect.
    effect Media Carousel widget 35
  6. Use the Slides Per View field to specify how many slides will appear at once in the carousel, from 1 to 10.
    slides per view Media Carousel widget 37
  7. In the Slides to Scroll field, define the number of slides to move during each interaction (up to 10).
    slides to scroll 1 Media Carousel widget 39
  8. In the Height field, adjust the slider to set the height of the carousel.
    height Media Carousel widget 41
  9. In the Width field, use the slider to define the width of the carousel.
    width Media Carousel widget 43

Slideshow Skin Settings

Slideshow skin displays a slider that presents a primary slide with smaller image thumbnails below it. This style is similar to a carousel but without pagination.

  1. In the Skin field, from the drop-down menu, select Slideshow.
    slideshow Media Carousel widget 45

  2. To add content, follow the same steps we used for the carousel settings.
  3. In the Effect field, choose between Slide, Fade, or Cube for the transition effect.
    slideshow effect Media Carousel widget 47
  4. In the Height field, adjust the slider to set the height of the slideshow.
    slideshow height Media Carousel widget 49
  5. Under the Thumbnail section, use the Slides Per View field to specify how many slides will appear at once in the slideshow, from 1 to 10.
    slideshow slide per view Media Carousel widget 51
  6. In the Ratio field to select the aspect ratio – options include 1:1, 4:3, 16:9, or 21:9.
    ratio Media Carousel widget 53
  7. Enable the Centered Slides toggle to position the currently displayed slide in the center of the slideshow view.

    centred slides Media Carousel widget 55

Coverflow Skin Settings

Coverflow skin displays a slider with a prominent central slide flanked by two adjacent slides.

  1. In the Skin field, from the drop-down menu, select Coverflow.
    coverflow Media Carousel widget 57

  2. To add content, repeat the same steps we used for the carousel settings.

  3. In the Height field, adjust the slider to set the height of the carousel.
    coverflow height Media Carousel widget 59
  4. In the Width field, use the slider to define the width of the carousel.
    coverflow width Media Carousel widget 61

In the Content tab, you can customize various carousel skin designs and access other additional options.

Note: The options for Slides and Additional Settings in the Content tab vary depending on the skin type you choose. Let’s review each skin type’s settings individually.

Content tab

content tab carousel Media Carousel widget 63
  • Skin: You get different skin options to choose from. If you select Carousel, the further options are:
    • Slides: Upload images or videos and set their respective URLs.
    • Effect: Choose the transition style between slides: Slide, Fade, or Cube.
    • Slides Per View: Decide how many slides are visible simultaneously, from 1 to 10.
    • Slides to Scroll: Choose the number of slides that move during a single swipe from 1 to 10.
    • Height: Use the slider to adjust the height of the carousel.
    • Width: Use the slider to set the widget of the carousel
  • Arrows: Enable the toggle to display navigation arrows.
  • Pagination: Choose from various pagination styles: None, Dots, Fraction, Progress.
  • Transition Duration: Set the speed of slide transitions in milliseconds (e.g., 1000 ms = 1 second).
  • Autoplay: Decide if the carousel should automatically play slides.
  • Autoplay Speed: Adjust the interval between each slide transition in milliseconds.
  • Infinite Loop: Choose whether the carousel should loop continuously.
  • Pause on Hover: Determine if autoplay should pause when a user hovers over the carousel.
  • Pause on Interaction: Determine if autoplay should pause when a user interacts with the carousel.
  • Overlay: Opt for an overlay style when hovering over slides: None, Text, or Icon.

    If you choose Text:
    • Caption: Choose which text to display as the caption – Title, Caption, or Description
    • Animation: Choose from Fade, Slide Up, Slide Down, Slide Right, Slide Left, Zoom In

         If you choose Icon:

    • Icon: Choose from a search icon, plus icon, eye icon, or link icon.
  • Image Resolution: Pick an image size preference from Thumbnail, Full, or Custom.
  • Image Fit: Decide how images should fit within their containers: Cover, Contain, or Auto.
  • Lazyload: Enable the Lazyload toggle to load images only when they are about to be displayed. This feature helps in improving page speed. Learn more about Lazy Loading

 

content tab slideshow Media Carousel widget 65
  • Skin: You get different skin options to choose from. If you select Slideshow, the further options are:
    • Slides: Upload images or videos and set their respective URLs.
    • Effect: Choose the transition style between slides: Slide, Fade, or Cube.
    • Height: Use slider to adjust the height of the slide show.

Thumbnails

    • Slides Per View: Decide how many slides should be visible simultaneously, from 1 to 10.
    • Ratio: Select the aspect ratio of the thumbnails from options like 1:1, 4:3, 16:9, or 21:9.
    • Centered Slides: Toggle on this option to have the current slide appear at the center of the slideshow view.
  • Arrows: Enable the toggle to display navigation arrows.
  • Transition Duration: Set the speed of slide transitions in milliseconds (e.g., 1000 ms = 1 second).
  • Autoplay: Decide if the carousel should automatically play slides.
  • Autoplay Speed: Adjust the interval between each slide transition, in milliseconds.
  • Infinite Loop: Decide if the carousel should play in an endless loop.
  • Pause on Hover: Determine if autoplay should pause when a user hovers over the carousel.
  • Pause on Interaction: Determine if autoplay should pause when a user interacts with the carousel.
  • Image Resolution: Pick an image size preference from Thumbnail, Full, or Custom.
  • Image Fit: Specify how images should be scaled within their containers: Cover, Contain, or Auto.
  • Lazyload: Enable the Lazyload toggle to load images only when they are about to be displayed. This feature helps in improving page speed. Learn more about Lazy Loading
content tab coverflow Media Carousel widget 67
  • Skin: You get different skin options to choose from. If you select Coverflow, the further options are:
    • Slides: Upload images or videos and set their respective URLs.
    • Slides Per View: Determine the maximum number of slides visible simultaneously, from 1 to 10.
    • Slider Per Scroll: Define how many slides should transition during a single swipe, from 1 to 10.
    • Height: Adjust the vertical size of the carousel.
    • Width: Modify the horizontal size of the carousel.
  • Arrows: Enable the toggle to display navigation arrows.
  • Transition Duration: Set the speed of slide transitions in milliseconds (e.g., 1000 ms = 1 second).
  • Autoplay: Decide if the carousel should automatically play slides.
  • Autoplay Speed: Adjust the interval between each slide transition in milliseconds.
  • Infinite Loop: Decide if the carousel should play in an endless loop.
  • Pause on Hover: Determine if autoplay should pause when a user hovers over the carousel.
  • Pause on Interaction: Choose if the autoplay feature should pause when a user interacts with the carousel.
  • Image Resolution: Pick an image size preference from Thumbnail, Full, or Custom.
  • Image Fit: Specify how images should be scaled within their containers: Cover, Contain, or Auto.
  • Lazyload: Enable the Lazyload toggle to load images only when they are about to be displayed. This feature helps in improving page speed. Learn more about Lazy Loading

Style tab

In the Style tab, you can customize slides, navigation arrows, and pagination dots by modifying colors, backgrounds, and other visual settings.

style tab slides Media Carousel widget 69

Use the slider to adjust the space between slides.

Select a background color for the carousel.

Determine the thickness of the carousel’s border.

To create rounded corners around the image, increase the border radius. For more details, see Border radius tools.

Pick a color for the carousel’s border.

Set the internal spacing within the carousel.

style tab navigation Media Carousel widget 71
  • Size: Use the slider to set the size of the arrows. Size can be in PX, EM, REM, or Custom. Learn more about Units of measurement.
  • Color: Select the arrow color.
  • Position: Decide if the pagination should appear inside or outside the slides.
  • Size: Define the dot size in PX, EM, or REM, or add a custom size. Learn more about Units of measurement.
  • Color: Choose the dot color.
  • Active Color: Choose the color for the currently active dot.
  • Color: Set the color for the play icon on video slides.
  • Size: Define the play icon’s size in PX, EM, or REM. Learn more about Units of measurement.
  • Shadow: Apply a shadow effect to the video play icon text.

 

overlay Media Carousel widget 73

When selecting the Overlay feature, customization options vary based on the chosen overlay type:

For Text Overlay:

  • Background Color: Set the background color for the overlay.
  • Text Color: Define the color for the textual content within the overlay.
  • Typography: Adjust font styles and other text-related properties of the overlay text.

For Icon Overlay:

  • Background Color: Assign a background color for the overlay.
  • Text Color: Select the color for any text associated with the overlay icon.
  • Icon Size: Scale the size of the overlay icon. Size can be in PX, EM or REM. Learn more about Units of measurement.
style tab Media Carousel widget 75
Define the color for the lightbox display.

Specify the color for the lightbox’s UI elements, affecting the arrow, dot navigations, and the close (X) icon.

Determine the color change effect for the lightbox’s UI elements when users hover over them.

Adjust the width dimension for displayed videos within the lightbox.

Advanced tab

The Advanced tab provides options to control the media carousel position, adjust the spacing, add custom code, and more.

advanced tab of media carousel Media Carousel widget 77

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article