How to Use Elementor Image Carousel for Images & Logos

Adding an image carousel to your WordPress site can instantly make your content more engaging and professional. Whether you’re showcasing client logos, product images, or a gallery of your latest work, a carousel helps display multiple visuals in a clean, scrollable format.

If you’re using Elementor, you might already be familiar with its basic image widgets, but when it comes to flexible, fully customizable carousels, that’s where Master Addons can give you more.

With Master Addons, you get two powerful widgets built specifically for this purpose: Logo Slider and Image Carousel. These tools give you full control over layout, animation, navigation, and styling—without writing any code.

In this guide, we’ll walk you through how to create both logo and image carousels using Master Addons, and show you how to customize them to fit your site’s design perfectly.

How to Use the Logo Slider Widget (Master Addons)

If you want to showcase brand logos, client partners, sponsors, or trusted tools, the Logo Slider widget from Master Addons is a great fit. This widget is completely free and can be accessed in the free version of the plugin.

It helps display multiple logos in a smooth carousel layout—ideal for homepages or testimonials sections.

Here’s how to set it up:

Step 1: Add the Logo Slider Widget

Open your page with Elementor.

Search for “Logo Slider” in the widgets panel (you’ll need Master Addons installed and activated).

Search for Logo Slider widget

Drag and drop it onto your page. It should look like this:

IMG 2 Logo Slider on Elementor

Step 2: Add Logo Items

Inside the Content > Logo Items panel:

Click “Add Item” to add as many logos as you want to the slider. Click on “Brand name 1” or “Brand name 2” to upload your logo images.

You can link each logo to a URL (great for affiliate logos or case studies).

Add a link to a logo

Choose a hover effect — show another image or display text like a brand name and description on hover.

Text or Image on hover

Step 3: Enable Tooltip (Optional)

Toggle on the Tooltip feature if you want extra info to appear when users hover.

Enable tooltip

Customize the tooltip:

  • Choose animation style (Fade, Scale, Perspective, etc.)
  • Set trigger (hover or click), placement, duration, and even follow the cursor.
  • Add arrows for visual context.

Step 4: Set Up Navigation

Go to Navigation settings:

IMG 5 Navigation settings
  • Choose how users will move through the carousel: Arrows, Dots, Fractions, or a Progress Bar.
  • Depending on what you pick you’ll see different settings to adjust for Arrows, Dots, Fractions and Progress Bar.
  • Upload custom icons or pick from Elementor’s icon library(Will only show if you pick Arrows).
  • Option to hide arrows on mobile for a cleaner view(Will only show if you pick Arrows).

Step 5: Configure the Carousel Behavior

Under Carousel Settings, control how the slider behaves:

Carousel settings
  • Layout: Standard carousel or Coverflow
  • Enable Autoplay, set speed, and pause on hover
  • Choose how many slides scroll per swipe
  • Enable Loop to make it infinite
  • Use Drag Free for a smooth, touch-friendly experience
  • Enable Observer if the slider is inside tabs or accordions

Customize the Carousel Appearance

Once your logos are added and functional, head over to the Style tab to adjust the look and feel.

Style Your Logo Items

Carousel item style settings
  • Set background color, borders, and padding
  • Add shadows and hover effects
  • Adjust spacing and opacity
  • Style the hover text or image tooltip if enabled

Customize Navigation Styles

IMG 8 Navigation style settings
  • Change arrow color, size, background, and hover effects
  • Adjust scrollbar colors and height
  • Adjust dot styles on active and normal states
  • Adjust dot size, space between and even advanced changes such as width, height and border radius.
  • Adjust the bar color, progress color for the progress bar
  • Adjust offsets for all types of navigation

Responsive Controls

  • Use mobile-specific toggles like hiding arrows or adjusting padding
  • Enable Auto Height to make sure the slider looks good across devices

Logo Slider In Action

How to Use the Image Carousel Widget (Master Addons)

The Image Carousel widget in Master Addons is perfect for showcasing photos, portfolio pieces, product images, or gallery-style visuals in a clean, swipeable layout.

Whether you’re using it for a personal blog or a business site, it’s an easy way to make your images interactive.

We’ve already seen with the Logo Slider how to use access an element. The process is exactly the same for the Image Carousel element. Just type in “Image Carousel” in the search and drag and drop it on your editor.

Let’s get directly into how to use this element.

Here’s how to get started:

Step 1: Add Your Images

Go to Content > Images.

Select images for the image carousel
  • Upload or select images from your media library.
  • You can reorder them easily.
  • Adjust image resolution for better load speed or quality.

Optionally, toggle on Lightbox to let users view a larger version of the image when clicked.

IMG 10 Enable

Choose your lightbox type: Fancybox or Elementor’s built-in.

Step 2: Set Up Navigation

Under the Navigation tab:

Navigation settings for Image Carousel
  • Choose how visitors will move through your carousel — Arrows, Dots, Progress bar, or Fraction-based indicators.
  • Similar to the logo slider you’ll get various settings to adjust depending on what you pick.
  • Set arrow positions (top, bottom, center, etc.)
  • Place arrows inside or outside the carousel area
  • Upload custom arrow icons or use existing ones
  • Optionally hide arrows on mobile for a simpler experience

Step 3: Configure Carousel Behavior

Head over to Carousel Settings:

IMG 12 Carousel settings for Image Carousel
  • Choose layout: Standard Carousel or Coverflow
  • Enable Autoplay and set the speed
  • Use Pause on Hover to stop the carousel when hovered
  • Adjust how many slides scroll at once
  • Toggle Center Slide to highlight the middle image
  • Enable Grab Cursor and Drag Free Mode for touch-friendly navigation
  • Turn on Loop for infinite scrolling
  • Activate Observer if this widget is inside tabs or accordions

Customize the Image Carousel Appearance

Once your image carousel is set up and working, move to the Style tab to fine-tune how everything looks.

Style the Carousel Items

Image Carousel item style settings
  • Set backgrounds, borders, padding, and item gap
  • Add shadows and hover effects
  • Adjust opacity for hover or active states
  • Enable Shadow Mode for depth

Lightbox Styling (If Enabled)

Image Carousel Lightbox style settings
  • Pick a custom preview icon
    Change icon color, hover effects, and size
  • Style the overlay background (Classic or Gradient)
  • Customize captions for title and subtitle — control typography, padding, margins, and even add subtle animations

Navigation Styling

IMG 15 Navigation arrow style settings
  • Just like the Logo Slider, depending on the type of navigation you pick you’ll see different customization options here.
  • Customize arrow color, background, padding, and size.
  • Add hover effects like color changes or shadows
  • Adjust horizontal positioning with arrow offset (For Arrow/Arrows and Dots)

Image Carousel In Action

How Our Users Create Beautiful Designs With Master Addons

The Image Carousel as well as the Logo Slider widgets are versatile and work great for product showcases, portfolio sliders, event photo galleries, or even testimonials with images

And thanks to its smooth loop, drag, and autoplay options, it offers a dynamic visual experience without overwhelming the layout.

Many of our users use elements such as the Logo Slider or Image Carousel to create visually stunning websites.

Check out the possibilities and enjoy the array of beautiful websites powered by Master Addons in our brand showcase.

Take Your Carousel Designs To The Next Level

Once you’ve set up your Image Carousel or Logo Slider using Master Addons, you can go a step further with advanced styling and behavior controls. These features aren’t just about looks — they let you fine-tune how and when your carousel appears, reacts, and stands out on your page.

Here’s how you can take full advantage of Master Addons’ extra tools:

Transforms (X/Y Axis Movement)

Transforms

The Transform option lets you shift the entire carousel or individual logos horizontally (X axis) or vertically (Y axis). You can apply these movements on both the normal state and when a user hovers over an item.

Use case: Add subtle motion to your logos when hovered — great for interactive branding sections.

Parallax Effect

IMG 18

Adds a scrolling depth effect by making your carousel (or any element within it) move at a different speed than the background as the user scrolls down the page. This creates a visual layering effect that adds dimension to your layout.

Use case: Perfect for full-width hero sections where the logo slider scrolls at a different speed than the background.

Reveal Effect

Reveal

Applies a masked background layer that gradually “reveals” your content through animation. You can adjust the direction, background color, and intensity of the reveal effect.

Use case: Highlight premium logos or product images by making them “reveal” into view on scroll.

Display Conditions

Display Conditions

Lets you control when and to whom a specific carousel or slider is shown. You can set conditions based on login status, user roles (like admin, editor, subscriber), browser type, operating system, date, time, and more.

Use case: Only show client logos to logged-in users, or display a holiday-themed image slider only during a specific date range.

Floating Effects

Floating Effects

Applies continuous, gentle animations that make the carousel or individual logos float up, down, left, or right. The speed and intensity can be controlled.

Use case: Draw attention to a featured image slider on a landing page with light, animated movement.

Tooltips

Tooltip

You can choose to add tooltips directly from the Logo Slider or Image Carousel settings. But if you skipped that or want more control, you can also use the Tooltip widget from the advanced options — it’s the same feature, just available in two places for flexibility.

Tooltips let you attach small, hover-activated text boxes to any logo or image in your carousel. These popups can include short labels, descriptions, or any helpful context you want to add.

Use case: Add brand descriptions, project names, or short messages when users hover over a client logo.

Positioning & Z-Index

Positioning

Choose how your carousel is positioned in the layout:

  • Static: Follows normal document flow.
  • Relative: Adjust the position from its original place without removing it from the document flow.
  • Absolute: Position it anywhere on the screen based on the nearest relatively positioned parent.

You can also set a Z-index value, which determines which element appears on top when elements overlap.

Use case: Stack a logo slider over a background video or place it beside overlapping text blocks while keeping everything clean and clickable.

Entrance Animations

IMG 24 Entrance Animations

Adds animation to how the carousel appears when the page loads or when it enters the viewport. Choose from over 70 different animations like fade, slide, bounce, zoom, and more.

Use case: Create a dynamic page load experience where your image carousel subtly fades or slides into view.

Container Extra (Min/Max Width & Height)

Container Extra

Lets you define minimum and maximum dimensions for the carousel container and individual elements. This helps maintain consistent spacing and layout structure, especially across devices.

Use case: Maintain visual consistency across different screen sizes by limiting how large or small a carousel can get.

These extra touches help your Carousel Elementor designs feel more polished, interactive, and tailored to your audience.

Whether you’re showing off client logos, testimonials, or product images — these enhancements give you full creative control.

Final Thoughts

Adding an image carousel or logo slider in Elementor doesn’t have to be complicated. With Master Addons, you get two powerful widgets — Image Carousel and Logo Slider — that give you full control over how your visuals appear and behave.

Whether you’re creating a client logo carousel, a product image slider, or just want to add some interactive elements to your pages, these widgets can handle it — no extra coding or plugins needed.

Because both widgets come with detailed customization, built-in navigation options, and support for looping, autoplay, and responsive behavior, you’re free to build exactly what your site needs — and ensure it looks good on every device.

If you’re working with Elementor carousels, especially for images or logos, this is one of the easiest ways to get started and still achieve professional results.

Let your content move. Let your visitors engage. All without slowing down your workflow.

Leave a Reply

Your email address will not be published. Required fields are marked *