The Carousel Gallery widget for Elementor is a versatile tool designed to showcase images and videos in an engaging, interactive carousel format. Whether you’re highlighting a product lineup, a portfolio, or social media content, this widget makes it easy to create stunning, responsive carousels. With multiple content sources and extensive customization options, you can craft a gallery that perfectly matches your website’s style and functionality.
Let’s look at each of the options in the Carousel Gallery widget for Elementor below.
Add a Carousel Gallery Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Carousel Gallery”
- Hover over the widget in the search results and click install
- Add the “Carousel Gallery” widget to any Elementor Page
Gallery Source Settings
Gallery Item Source
Determine the type of content that will populate your gallery. The available options include:
- Gallery
Manually upload or select specific images to create a custom gallery. - Image and Video Items
Show image and video items using the repeater field. - Instagram
Fetch and display content directly from your Instagram account. Ideal for showcasing social media posts and engaging with your audience. - Posts
Populate the gallery with images or featured media from your WordPress posts. You can specify post types, categories, or tags to refine the selection. - Products
Display product images sourced from your WooCommerce store or any product catalog. Useful for eCommerce galleries. - Current Product Gallery
Automatically pull images from the current product being viewed on a WooCommerce product page. Streamlines galleries for individual product pages. - Current Product Variations
Highlight images from the variations of the currently viewed product, such as different colors, sizes, or styles. - Current Post Metafield
Use custom metadata from the current post to generate the gallery content. This is ideal for advanced dynamic galleries tied to specific fields.
Choose Images
Choose images to create a custom gallery.
Image Title Source
Select the image title source from below options:
Image Auto (title or alt or caption): This option automatically selects the title from the first available source in this priority order:
- Title (if provided).
- Alt text (alternative text describing the image).
- Caption (a description or annotation of the image).
Image Title: This uses the actual title attribute of the image as the source for its title.
Image Alt: This uses the alt (alternative text) attribute of the image as the title source.
Image Caption: This uses the caption associated with the image as its title source.
Image Description Source
This option allows you to choose where the description of the image should come from.
- Image Description: This pulls the description specifically written for the image.
- Image Title: This uses the name or title you gave to the image.
- Image Alt: This takes the alt text (alternative text) written for the image. Alt text is used to describe the image for visually impaired users or when the image doesn't load.
- Image Caption: This option uses the caption text, which is typically shown below the image on a website.
Thumb Image Size
This dropdown allows you to select the size at which thumbnail images of gallery will be displayed, ensuring they are optimized for your website's layout, performance, and purpose.
- Full
- Large (max width 1024)
- Medium Large (max width 768)
- Medium (max width 300)
- Thumbnail (150x150)
- 1536x1536 (max width 1536)
- 2048x2048 (max width 2048)
- WooCommerce Thumbnail (300x300)
- WooCommerce Single (max width 600)
- WooCommerce Gallery Thumbnail (100x100)
Big Image Size
This dropdown allows you to select the size at which big images of gallery will be displayed, ensuring they are optimized for your website's layout, performance, and purpose.
- Full
- Large (max width 1024)
- Medium Large (max width 768)
- Medium (max width 300)
- Thumbnail (150x150)
- 1536x1536 (max width 1536)
- 2048x2048 (max width 2048)
- WooCommerce Thumbnail (300x300)
- WooCommerce Single (max width 600)
- WooCommerce Gallery Thumbnail (100x100)
Carousel Settings
Space Between Tiles
Adjust the gap between carousel items.
Tile to Scroll
Define the number of items to scroll per transition.
Scroll Duration
Set the time in milliseconds for a scrolling animation.
Scroll Easing
Specify the easing function for smooth scrolling transitions.
Autoplay
Enable or disable automatic sliding of carousel items.
Autoplay Timeout
Define the delay (in milliseconds) before the next autoplay slide starts.
Autoplay Direction
Set the direction of autoplay (e.g., Left or Right).
Autoplay Pause On Hover
Determine whether autoplay should pause when the user hovers over the carousel.
General Settings
Gallery Max Width
Set the maximum width of the gallery as a percentage of its container.
Tile Enable Text Panel
Enable or disable a text panel overlay on each tile.
Tile As Link
Enable linking for tiles, preventing the lightbox from opening.
Tile Link New Page
Open tile links in a new tab or window when enabled.
Tile As Link
Make the tile function as a clickable link.
Tile Enable Icons
Show or hide icons on tiles.
Tile Enable Image Effect
Apply visual effects to images when enabled.
Navigation Settings
Navigation
Enable or disable navigation controls.
Navigation Position
Set the position of navigation controls.
- Top
- Bottom
Navigation Play
Enable or disable automatic navigation playback.
Lightbox Settings
Lightbox Type
Set the lightbox display style.
- Wide for full-width
- Compact for a smaller layout
Lightbox Hide Arrows On Video Play
Hide navigation arrows when a video is playing in the lightbox.
Lightbox Show Numbers
Display slide numbers inside the lightbox (e.g., "1/10").
Lightbox Show Text Panel
Show the text panel overlay inside the lightbox.
Lightbox Swipe
Enable swipe gestures for navigation on touch devices.
Lightbox Zoom
Allow zooming on images inside the lightbox.
Lightbox Text Panel Align
Set the text panel alignment.
- Left
- Center
- Right
Carousel Gallery 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.
Tile Styling
Set the tile width, height, overlay opacity, overlay color, and background color.
Tile Border Styling
You can set the tile border color, width, and border radius.
Tile Shadow Styling
Set the tile shadow color, horizontal and vertical offset, shadow blur and shadow spread.
Tile Text Panel Styling
Here, you can set the tile panel background color, title color, background opacity, alignment and padding.
Lightbox Styling
You can set the lightbox overlay color, opacity, image border width, border color and border radius.
Navigation Styling
Set the navigation alignment, margin and spacing.
Carousel Gallery Design Examples For Elementor
Here are some live use cases for the Carousel Gallery Widget.
Carousel Gallery with carousel control.
Carousel gallery with tabs filter.
We hope this guide gave you a clear understanding of the Carousel Gallery Widget and its capabilities. With its versatile content options and customizable design, bringing your images and videos to life has never been easier. If you need any help or have questions, we’re here for you. Happy designing!
