The Product Carousel Widget allows you to showcase your products in an interactive carousel layout. The Product Carousel widget is customizable with many options to create amazing Carousels for your products. This widget enables you to quickly and easily create an interactive Carousel with its wide range of customization and styling options. It also supports advanced options such as Remote Connection and syncing with other widgets.
Let’s look at each of the options in the “Product Carousel Widget” below.
Install Product Carousel Widget for 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 “Product Carousel”
- Hover over the widget in the search results and click install
- Add your “Product Carousel” widget to any Elementor Page
Turn on or off the loop option.
Number of Products
Set the number of products to show at a time in carousel.
Slide to Scroll
Set the number of item to scroll at once.
Set the transition speed of carousel.
Margin between slides
Set the margin between carousel items.
Stage Padding Type
Choose from the given options to show offset margin.
Set the stage padding in pixels.
Turn on or off the autoplay option.
Set the time interval between autoplay.
Autoplay Hover Pause
Autoplay will pause on mouse hover.
Turn on or off the transition easing option.
It will set the carousel items to center.
Set Active Mode On Mobile
Enable/disable the active mode on mobile device.
Change On Click
It will change the clicked item on item click.
It will set the carousel direction from right to left.
By turning on, random product items will display in the carousel.
You can drag the product items with mouse.
Items can be dragged with touch swipe on touch friendly devices.
Scroll to Head
Scroll to head on item change if carousel not visible.
Show or hide elements in Product Carousel.
Show/Hide the image.
Show/Hide title element.
Title HTML Tag
Select the HTML tag for title from given options.
Show/Hide the price element.
Type the currency sign.
Show/Hide the description element on carousel.
Show/Hide rating element on the carousel.
Show/Hide the button.
Type the text for button.
Show/Hide arrows on the carousel.
Show/Hide the bullet icon for navigation.
Rating Icons Settings
Choose an icon for full ratings.
Choose an icon for half ratings.
Choose an icon for empty rating.
Set the arrow icons of the arrow navigation when turned on.
Choose a icon for Left Arrow
Choose a icon for Right Arrow
Connected Widgets Settings
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
You can connect two item-based widgets and sync them.
Choose the same group for two or more item-based widgets so they can sync together.
Manage the slides of the carousel using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Set a Title for your carousel item.
Type the price for your product carousel item.
Type the description for your product item.
Choose any custom Image for the carousel.
Paste your URL to link with the button.
Set the rating for your product.
Product Carousel Widget Styling
Every aspect of the widget’s design can be controlled through different styling options. 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.
Set the alignment, height, and margin.
You can style the slide padding, margin, content padding, background color, and border.
You can set the image height, border radius, and image fit.
In this section, set the title spacing, typography, color, and color hover.
You can style the price spacing, typography, color, and color hover.
This section lets you set the description spacing, typography, color, and color hover.
You can customize the rating spacing, gap, size, color, and color hover.
You can style the button spacing, border radius, width, typography, padding, and color.
Nav Arrows Styling
You can style the nav arrow spacing, positioning, background, size etc.
Nav Bullets Styling
You can style the nav dots size, dot color, active color, spacing, and alignment.
Here are some live use cases for the Product Carousel widget.
Product Carousel synced with Remote Tabs and Remote Arrows.