Image Carousel Widget  #

The Image Carousel widget allows you to showcase multiple images in a smooth, responsive slider layout. It’s perfect for galleries, portfolios, featured visuals, or sections where images need to rotate with navigation controls and optional text overlays—working seamlessly with Elementor layouts and headings.

Live Demo

How to Use the Image Carousel Widget #

Step 1: Add the Widget #

1. Open a page in the Elementor Editor.

2. Search for Image Carousel.

3. Drag and drop the widget into your desired section.

Step 2: Configure Images #

Go to Content tab → Images.

• Add multiple images to the carousel.

• Reorder images using drag & drop.

• Remove images easily when not needed.

Step 3: Carousel Settings #

Go to Content tab → Settings.

Rows #

• Choose how many rows of images to display (e.g., One row).

Enable Loop #

• Enable to make the carousel scroll infinitely.

Spacing Left Right #

• Adjust horizontal spacing between images.

Slides to Show #

• Set how many images are visible at once.

Slides to Scroll #

• Control how many images move per slide action.

Autoplay #

• Enable or disable automatic sliding.

Speed (ms) #

• Control the transition speed in milliseconds.

Pause on Hover #

• Pause the carousel when the user hovers over it.

Navigation Options #

• Show Arrows – Enable left/right navigation arrows.

• Left Arrow Icon – Set a custom left arrow icon.

• Right Arrow Icon – Set a custom right arrow icon.

• Show Dots – Enable pagination dots below the carousel.

Content Visibility #

• Show Badge – Enable or disable badge display.

• Show Title – Show image title text.

• Show Description – Show image description text.

Step 4: Style the Carousel Container #

Go to Style tab → Container.

You can customize:

• Background Type

• Padding

• Margin

• Minimum Height

This controls the overall carousel wrapper appearance.

Step 5: Style Carousel Items #

Go to Style tab → Item.

Available options:

• Background Type

• Box Shadow

• Image Opacity

• Border Type

• Border Radius

• Margin

• Padding

You can apply different styles for Normal and Hover states.

Step 6: Style Navigation Arrows #

Go to Style tab → Arrows.

Customize arrow navigation with:

• Position (Inside / Outside)

• Size

• Padding

• Border Type

• Border Radius

• Box Shadow

Arrow Positioning #

• Adjust Left (X) and Top (Y) values for precise placement.

Normal / Hover Styles #

• Color

• Background

Step 7: Style Pagination Dots #

Go to Style tab → Dots.

Options include:

• Dot Style (e.g., Dotted)

• Spacing Left Right

• Spacing Top to Bottom

• Width & Height

• Border Radius

• Background Type

• Color

• Background Image

Step 8: Text Alignment & Title Styling #

Go to Style tab → Text Alignment & Position and Title.

• Control text alignment and placement.

• Text Color

• Customize title typography and appearance when titles are enabled.

Step 9: Advanced Options #

Use Elementor’s default Advanced tab for:

• Margin & padding

• Responsive visibility

• Motion effects

• Custom CSS (optional)

✅ Final Output #

The Image Carousel widget displays a responsive, animated image slider with full control over layout, 
navigation, and styling—ideal for galleries, portfolios, and visual sections that need smooth interaction.

Also see the tutorial  #

💡 Tips #

• Use optimized images for faster loading.

• Reduce Slides to Show on mobile for better readability.

• Enable hover styles subtly for a clean user experience.

• Combine with section headings for clear visual hierarchy.