fbpx

Black Friday Sale 50% Off

Days
Hrs
Min
Sec

Need Help?

Here are some good places you cant start.

Join the Community

Whats New?

Get updated about all the good stuff!

Product Carousel

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.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Product Carousel”
  3. Hover over the widget in the search results and click install
  4. Add your “Product Carousel” widget to any Elementor Page

General Settings

1
Loop

Turn on or off the loop option.

2
Number of Products

Set the number of products to show at a time in carousel.

3
Slide to Scroll

Set the number of item to scroll at once.

4
Transition Speed

Set the transition speed of carousel.

5
Margin between slides

Set the margin between carousel items.

6
Stage Padding Type

Choose from the given options to show offset margin.

  • None
  • Both
  • Left
  • Right
7
Stage Padding

Set the stage padding in pixels.

8
Autoplay

Turn on or off the autoplay option.

9
Autoplay Interval

Set the time interval between autoplay.

10
Autoplay Hover Pause

Autoplay will pause on mouse hover.

11
Transition Easing

Turn on or off the transition easing option.

12
Center

It will set the carousel items to center.

13
Set Active Mode On Mobile

Enable/disable the active mode on mobile device.

14
Change On Click

It will change the clicked item on item click.

15
RTL

It will set the carousel direction from right to left.

16
Random Order

By turning on, random product items will display in the carousel.

17
Mouse Drag

You can drag the product items with mouse.

18
Touch Drag

Items can be dragged with touch swipe on touch friendly devices.

19
Scroll to Head

Scroll to head on item change if carousel not visible.

Layout Settings

Show or hide elements in Product Carousel.

1
Show Image

Show/Hide the image.

2
Show Title

Show/Hide title element.

3
Title HTML Tag

Select the HTML tag for title from given options.

  • div
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • span
4
Show Price

Show/Hide the price element.

5
Currency

Type the currency sign.

6
Show Description

Show/Hide the description element on carousel.

7
Show Rating

Show/Hide rating element on the carousel.

8
Show Button

Show/Hide the button.

9
Button Text

Type the text for button.

10
Show Arrows

Show/Hide arrows on the carousel.

11
Show Bullets

Show/Hide the bullet icon for navigation.

Rating Icons Settings

1
Full

Choose an icon for full ratings.

2
Half

Choose an icon for half ratings.

3
Empty

Choose an icon for empty rating.

Arrows Settings

Set the arrow icons of the arrow navigation when turned on.

1
Left Arrow

Choose a icon for Left Arrow

2
Right Arrow

Choose a icon for Right Arrow

Connected Widgets Settings

1
Enable Remote Connection

Use remote control widgets to create advanced creative layouts.

2
Widget Name for Connection

This name will be used to connect and controls this widget by other widgets.

3
Sync

You can connect two item-based widgets and sync them.

4
Sync Group

Choose the same group for two or more item-based widgets so they can sync together.

Items Settings

Manage the slides of the carousel using the repeater field.

  • Add new items
  • Duplicate items
  • Delete items
  • Reorder Items
  • Edit Items
1
Title

Set a Title for your carousel item.

2
Price

Type the price for your product carousel item.

3
Description

Type the description for your product item.

4
Image

Choose any custom Image for the carousel.

5
Link

Paste your URL to link with the button.

6
Rating

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.

General Styling

Set the alignment, height, and margin.

Slides Styling

You can style the slide padding, margin, content padding, background color, and border.

Image Styling

You can set the image height, border radius, and image fit.

Title Styling

In this section, set the title spacing, typography, color, and color hover.

Price Styling

You can style the price spacing, typography, color, and color hover.

Description Styling

This section lets you set the description spacing, typography, color, and color hover.

Rating Styling

You can customize the rating spacing, gap, size, color, and color hover.

Button Styling

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.

Usage Examples

Here are some live use cases for the Product Carousel widget.

Product Carousel synced with Remote Tabs and Remote Arrows.

The biggest sale of the year
50% OFF all pricing plans!

Days
Hrs
Min
Sec

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!