In this guide, we will show you how to use the “Carousel Gallery widget“ on your Elementor website. The Carousel Gallery widget allows you to showcase images and videos in a dynamic, scrollable carousel format. It’s perfect for displaying portfolios, product galleries, or creative media collections engagingly and interactively. With its responsive design and smooth navigation, this widget enhances your website’s visual appeal and user experience.
Let’s explore the customization options available in the “Carousel Gallery widget“ for Elementor below.
Add a Free Carousel Gallery to Elementor
Add a Free Carousel Gallery Widget to an Elementor Page
Elementor Carousel Gallery Widget General Settings
Gallery Items Source
Define the content source for your gallery. You can choose manually uploaded images or dynamically pull content from posts, WooCommerce products, or social media.
Gallery
Image and Video Items
Posts
Products
Current Product Gallery
Current Product Variations
Current Post Metafield
Choose Images
Select, add, remove, and reorder individual images and media files to display in the gallery when “Gallery” is chosen as the source.
Image Title Source
Select the source for the image title text, displayed above the image or as a tooltip. The text is pulled from the WordPress Media Library fields.
Image Auto
Image Title
Image Alt
Image Caption
Image Description Source
Select the source for the image title text, displayed above the image or as a tooltip. The text is pulled from the WordPress Media Library fields.
Image Auto
Image Title
Image Alt
Image Caption
Thumb Image Size
Select the image size for thumbnails displayed on the page. Smaller sizes improve loading speed.
Full
Large (max width 1024)
Medium Large (max width 768)
Medium (max width 300)
Thumbnail (150x150)
1536x1536
2048x2048
Custom Theme or Plugin Sizes
Big Image Size
Define the image size for larger previews or lightbox views. Use a larger size than the thumbnail for better clarity.
Full
Large (max width 1024)
Medium Large (max width 768)
Medium (max width 300)
Thumbnail (150x150)
1536x1536
2048x2048
Custom Theme or Plugin Sizes
Space Between Tiles
Define the space between each item (tile) in the carousel.
Tile to Scroll
Set how many tiles move each time the carousel scrolls.
Scroll Duration (ms)
Specify the duration of the scroll animation in milliseconds.
Scroll Easing
Choose the animation easing function that controls how the scroll movement accelerates and decelerates.
linear
ease
easeInSine
easeOutSine
easeInOutSine
easeInQuad
easeOutQuad
easeInOutQuad
Autoplay
Enable or disable automatic scrolling of the carousel.
Autoplay Timeout (ms)
Set how long the carousel waits before automatically scrolling to the next tile.
Autoplay Direction
Select the direction in which the carousel automatically scrolls.
Autoplay Pause on Hover
Pause autoplay when the user hovers over the carousel.
Gallery Max Width (%)
Set the maximum width of the gallery relative to its container, expressed as a percentage.
Tile Enable Text Panel
Show or hide text elements (such as titles or captions) over the gallery tiles.
Tile As Link
Enable tiles to act as clickable links or open a lightbox when selected.
Tile Link New Page
Open tile links in a new browser tab or window.
Tile Enable Icons
Display icons (such as link or zoom icons) on gallery tiles.
Tile Enable Image Effect
Apply visual effects or filters to the images on hover.
Navigation
Enable or disable navigation elements (such as arrows or dots) for user control.
Navigation Position
Set the position of the navigation elements within the carousel.
Top
Bottom
Left
Right
Center
Navigation Play
Allow navigation to cycle continuously through all items, restarting when it reaches the end.
Lightbox Type
Select the size or style of the lightbox pop-up.
Wide
Compact
Lightbox Hide Arrows on Video Play
Hide navigation arrows while a video is playing in the lightbox.
Lightbox Show Numbers
Display the current image number inside the lightbox.
Lightbox Show Text Panel
Show or hide the text panel within the lightbox.
Lightbox Swipe
Allow users to swipe between images in the lightbox on touch devices.
Lightbox Zoom
Enable or disable zoom functionality within the lightbox.
Lightbox Text Panel Align
Set the alignment of text displayed in the lightbox panel.
Left
Center
Right
Elementor Carousel Gallery Widget Style Settings
Tile Width
Set the fixed width of each tile or image in the carousel (in pixels).
Tile Height
Set the fixed height of each tile or image in the carousel (in pixels).
Enable Outline
Show or hide an outline (border) around each carousel tile.
Tile Overlay Opacity
Adjust the transparency level of the overlay applied to tiles. Value ranges from 0 (fully transparent) to 1 (fully opaque).
Tile Overlay Color
Choose the color of the semi-transparent overlay applied to the tiles.
Tile Background Color
Select a background color for the tiles. If left blank, the default or theme background color will be used.
Tile Enable Border
Enable or disable a border around each carousel tile.
Border Color
Select the color of the tile border.
Tile Border Width
Set the thickness of the border around each tile (in pixels).
Tile Border Radius
Adjust the roundness of the tile corners. Value of 0 means sharp corners, higher values create more rounded corners.
Tile Enable Shadow
Enable or disable a box shadow on the carousel tiles.
Tile Shadow Color
Select the color of the shadow applied to the carousel tiles.
Tile Shadow Horizontal Offset
Set the horizontal position of the shadow relative to the tile. Positive values move the shadow right, negative values move it left.
Tile Shadow Vertical Offset
Set the vertical position of the shadow relative to the tile. Positive values move the shadow down, negative values move it up.
Tile Shadow Blur
Define the blur radius of the shadow to control how soft or sharp it appears.
Tile Shadow Spread
Adjust the spread of the shadow beyond its blur radius. Positive values increase the size, negative values shrink it.
Tile Panel Background Color
Set the background color of the text panel displayed on the tile.
Tile Text Panel Title Color
Select the text color for the title within the text panel.
Tile Text Panel Background Opacity
Adjust the transparency level of the text panel background. Value ranges from 0 (fully transparent) to 1 (fully opaque).
Tile Text Panel Title Text Align
Set the alignment of the title text within the text panel.
Left
Center
Right
Tile Text Panel Padding
Define the internal spacing (padding) inside the text panel. Value is usually in pixels.
Lightbox Overlay Color
Set the background color behind the image in the lightbox.
Lightbox Overlay Opacity
Adjust the transparency level of the lightbox overlay. Value ranges from 0 (fully transparent) to 1 (fully opaque).
Lightbox Image Border
Enable or disable a border around the image inside the lightbox.
Lightbox Image Border Width
Set the thickness of the border around the lightbox image (in pixels).
Lightbox Image Border Color
Select the color of the border around the lightbox image.
Lightbox Image Border Radius
Adjust the roundness of the lightbox image corners. A value of 0 means sharp corners; higher values create rounded corners.
Navigation Align
Set the alignment of the navigation elements (arrows or dots) relative to the carousel/gallery.
Left
Center
Right
Navigation Margin
Define the distance between the carousel/gallery and the navigation elements (in pixels).
Navigation Spacing
Set the spacing between individual navigation elements, such as dots (in pixels).
Carousel Gallery Widget Design Examples For Elementor
Here are some live use cases for the Carousel Gallery widget.
Carousel Gallery with Tabs.
Carousel Gallery with Carousel Grid.
Thank you for using the Team Member Carousel widget for Elementor! This engaging and dynamic tool allows you to showcase your team members in a stylish, interactive carousel. Highlight key details such as names, roles, descriptions, images, and social media links to build trust and add a personal touch to your website. Designed for flexibility and responsiveness, it offers full customization options to match your site’s look and feel perfectly. For support or inspiration, please don’t hesitate to get in touch or explore our demo.