Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

Content Carousel - Featured Blog
Stacked Images - Featured Blog
ACF Repeater Field - Featured Blog

Overlay Carousel for Elementor

The Overlay Carousel widget for Elementor enables you to showcase content in an engaging and interactive carousel with an overlay effect. It is a versatile tool designed to enhance your website’s visual appeal and functionality with its dynamic layout and intuitive customization options. Whether you’re looking to display portfolio items, testimonials, or featured products, the Overlay Carousel Widget ensures a seamless browsing experience that captures your audience’s attention.

Let’s look at each of the options in the Overlay Carousel widget for Elementor below.

Elementor Overlay Carousel Video Tutorial

Add a Overlay Carousel Widget to Elementor

This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Overlay Carousel”
  3. Hover over the widget in the search results and click install
  4. Add the “Overlay Carousel” widget to any Elementor Page

Source Settings

The Overlay Carousel widget supports multi-source functionality, allowing you to populate dynamic, data-driven content from a variety of sources. These include items, posts, meta fields, JSON or CSV files, galleries, terms, users, menus, and even API integrations for ultimate flexibility.

1

Items

You can use the item repeater field as item source.

2

Posts

Display WordPress posts dynamically in overlay carousel, including custom post types and fields for maximum flexibility.

3

WooCommerce Products

Use this to showcase WooCommerce product images, names, prices, and descriptions in the carousel.

4

Meta Field

Use Meta as an item source for your overlay carousel to dynamically display and manage content from your Meta data.

5

JSON or CSV

Load your overlay carousel with data from JSON or CSV files to easily manage and display structured content.

6

Gallery

You can use the gallery as the source for your items. Simply select multiple photos to create and customize a stunning gallery.

7

Terms

Use Terms as a source for your overlay carousel to dynamically display and manage taxonomy terms from your WordPress site.

8

Users

You can use WordPress Users as an item source for your overlay carousel to display and manage dynamic content from your site’s user data.

9

Menu

Use your WordPress Menu as a source for the overlay carousel to dynamically display and manage menu items in a visually engaging layout.

10

RSS

Fetch and display items from an RSS feed. This is perfect for showcasing updates or content from external blogs.

11

API Integrations

Integrate an API into your overlay carousel to dynamically fetch and display data from external systems or services.

General Settings

1

Margin

Defines the space (in pixels) between carousel items. Increasing the value adds more spacing between items, while a lower value reduces the spacing.

2

Loop

Enables or disables infinite looping of the carousel. When enabled, the carousel will continuously cycle through items without stopping at the end.

3

Autoplay

Enable autoplay to make the carousel automatically scroll through items without user interaction.

4

Number of Items

Set the number of items visible in the carousel at one time.

5

Transition Speed

Specify the duration (in milliseconds) of the transition animation between slides. A lower value creates faster transitions, while a higher value slows them down.

6

Autoplay Interval

Defines the time in milliseconds between automatic transitions when autoplay is enabled.

7

Center Mode

When enabled, the carousel focuses the middle item and slightly shows the previous and next items on the sides.

8

Make 3D

Adds a 3D effect to the carousel, items appear with depth, simulating a 3D perspective.

9

Randomize Items at Start

Shuffles the order of items when the carousel is first loaded. Useful for displaying content in a non-sequential manner.

10

Autoplay Hover Pause

Pauses the autoplay feature when the user hovers over the carousel.

11

Show Arrows

Display the navigation arrows on the sides of the carousel.

12

Item Image Size

It lets you choose predefined image dimensions for optimal display and performance.

  1. Full
  2. Large (max width 1024)
  3. Medium Large (max width 768)
  4. Medium (max width 300)
  5. Thumbnail (150x150)
  6. 1536x1536 (max width 1536)
  7. 2048x2048 (max width 2048)
  8. WooCommerce Thumbnail (300x300)
  9. WooCommerce Single (max width 600)
  10. WooCommerce Gallery Thumbnail (100x100)
13

Stage Padding Type

Adds padding to the left and right of the carousel's viewport. Useful for creating spacing around the entire carousel stage.

14

Auto Width

Adjusts the width of each carousel item to match the width of its content. This is useful for variable-width content like text or small images.

15

Show Dots

Enables pagination dots below the carousel. These dots allow users to navigate directly to specific slides.

16

Slide Transition

Determines the type of animation used for transitions between slides.

  1. Ease
  2. Linear
  3. Ease-In
  4. Ease-Out
  5. Ease-In-Out

Arrows Settings

1

Left Arrow

Choose an icon to show as left arrow.

2

Right Arrow

Choose an icon to show as right arrow.

Layout Settings

1

Show Icon

Show or hide icon on carousel.

2

Show Title

Show title element on carousel.

3

Show Text

Show text element on carousel.

4

Link Type

Select the link type.

  1. Button : Link URL with only button.
  2. All Item: Link your URL with whole carousel item.
5

Button Text

Type text to show in the button.

6

Show Back Image

Show or hide the back image.

Connected Widgets Settings

Connected Widgets Settings let you create dynamic, interactive layouts with advanced features. Use remote control widgets for creative layouts or sync item-based widgets together for smooth integration.

1

Enable Remote Connection

Use remote control widgets to create advanced creative layouts.

2

Widget Name for Connection

This name will be used to connect and controls this widget by other widgets.

3

Sync

You can connect two item-based widgets and sync them.

4

Sync Group

Choose the same group for two or more item-based widgets so they can sync together.

Items Setting

Manage the items of the overlay carousel using the repeater field.

  1. Add new items
  2. Duplicate items
  3. Delete items
  4. Reorder Items
  5. Edit Items
1

Title

Type text for title.

2

Content

Type text to show as content.

3

Link

Type or paste the URL to link with carousel item.

4

Icon

Choose an icon to display in carousel.

5

Back Image

Choose an image to display as back image.

6

Back Image Size

Select appropriate size of back image from given options.

  1. Full
  2. Large (max width 1024)
  3. Medium Large (max width 768)
  4. Medium (max width 300)
  5. Thumbnail (150x150)
  6. 1536x1536 (max width 1536)
  7. 2048x2048 (max width 2048)
  8. WooCommerce Thumbnail (300x300)
  9. WooCommerce Single (max width 600)
  10. WooCommerce Gallery Thumbnail (100x100)

Overlay Carousel Widget Styling

There are a number of styling options that allow you to control every aspect of the widget’s design. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.

Slide Styling

Set the slide alignment, overlay padding, image height, overlay color, opacity, border and radius.

Content Box Styling

You can set the content padding, border width and border color.

Icon Styling

Set the size, color, background, radius, shadow, border, spacing and alignment of icon element.

Title Styling

Here, you can set the title spacing, color, and typography.

Text Styling

You can set the text spacing, color and typography.

Button Styling

Set the button typography, padding, radius, background color, text color, spacing, and border.

Dot Navigation Styling

You can set the navigation dot size, color, spacing, and alignment.

Nav Arrows Styling

Here, you can set the nav arrows spacing, positioning, radius, background, icon color, and border.

Overlay Carousel Design Examples For Elementor

Here are some live use cases for the Overlay Carousel Widget.

Overlay carousel for posts with filter.

Overlay carousel with remote control.

We hope this guide helps you make the most of the Overlay Carousel Widget for Elementor. With its robust features and sleek design, it’s an excellent addition to your website toolkit, perfect for creating stunning, interactive carousel with overlay effect. Should you need further assistance or have any questions, feel free to explore our support resources or reach out to our team.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!