help center

On this page

Carousel widget

Last Update: March 3, 2024
Note
The Carousel widget is currently an experimental feature and must be activated to use.
Important
To use the Carousel widget, make sure the following features are active:
  • Flexbox Containers
  • Nested Elements

Add the widget

Carousel Widget 1

To access and use a widget:

  1. In Elementor Editor, click +.
    All available widgets are displayed.

  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

Carousels are effective tools for displaying multiple pieces of content, such as images, text, or other elements, in a single, compact space on your webpage.

The Carousel widget allows you to use nested elements within the carousel items. This means you can design and structure each item within the carousel with different elements, allowing for a unique and customized presentation.

Also, the widget gives you the flexibility to create carousels that match your specific needs and preferences. You can use a combination of images, text, buttons, or any other Elementor elements to create a carousel that suits your website’s style and content.

Video

See a video demonstrating the widget in action. 

Common use case

Emily is creating an online furniture store. On the hero section of the website, they used the carousel to highlight different aspects of their business.

They created a nested elements layout where, in the first carousel item, they added images showcasing a stylish living room furniture set, capturing visitors’ attention with a visually appealing display of their products.

In the second carousel, they added customer testimonials with titles, customer images, star ratings, and reviews to provide social proof of product satisfaction.

The third carousel item includes a Call-to-Action (CTA) button labeled Shop Now. When visitors click on it, they’re directed to the main product catalog or a specific category page, encouraging them to explore your furniture collection further.

Carousel widget 23

Additional use cases

  • Present different course topics or modules in an educational platform with a scrolling carousel.
  • Display key features of multiple products in a single rotating carousel.
  • Highlight different event details sequentially using the carousel widget.
  1. Add the Carousel widget to the canvas. For details, see Add elements to a page.
  2. By default, the carousel widget comes with three slides. Each slide has one container. You can add elements to these containers to build your own carousel. Learn how to work with containers. 
    Carousel widget Carousel widget 435

    Note: Do not add a carousel inside a carousel, as it may affect the functionality.
  3. You can also add or delete these default slides.
    1. To add a new slide, in the Content tab, under the Slides section, click the Add Item button. You can also create the exact copy of the existing slide by clicking the Carousel widget 13 Carousel widget 437 icon.
      Carousel widget 14 Carousel widget 439
    2. Click the delete icon Carousel widget 3 Carousel widget 441 to delete a slide.
      Carousel widget 11 1 Carousel widget 443
  4. (Optional) Click on the individual slide to change its Title. 

    Carousel widget 15 Carousel widget 445
  5. In the Slides on display field, from the dropdown menu choose the number of slides visible.
    Carousel widget 18 Carousel widget 447

    Note: The more slides you add, the smaller each slide will be.
  6. In the Slides on scroll field, from the dropdown menu select the number of slides that will move when visitors click the navigation icon.
    Carousel widget 5 Carousel widget 449
  7. Enable the Equal Height option to have all the slides the same height.
    Carousel widget 7 Carousel widget 451

Settings for the Menu widget

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

Content tab

In the Content tab, you can configure settings related to the content and functionality of the carousel, such as the number of visible slides, autoplay options, navigation controls, and pagination style.

Carousel widget 16 Carousel widget 453

Slides that make up the carousel. 

  • Click the icon Carousel widget 13 Carousel widget 437 to copy a slide.
  • Click the icon Carousel widget 3 Carousel widget 441 to delete a slide.

Controls the number of slides visible to visitors.

  • Use the dropdown to determine the number of slides visible. 

Note: The more slides you add, the smaller each slide will be.

Use the dropdown to determine the number of slides that will move when visitors click the navigation icon.

Determines whether all slides will be equal in height.

Carousel widget 17 Carousel widget 459

The carousel scrolls automatically while visitors are viewing the page. Slide the toggle to No to deactivate the Autoplay feature.

Controls how long each slide stays on screen before it automatically moves to the next one. Measured in milliseconds. Hidden if autoplay is turned off.

Disables autoplay while visitors mouse over the carousel. Hidden if autoplay is turned off.

Disables autoplay when visitors click elements in the carousel. Hidden if autoplay is turned off.

Turn this toggle off to prevent the carousel from restarting after it reaches the last slide. 

Note: Infinite scroll is inactive while editing and only works in preview mode or on a live site.

The time it takes for one slide to replace another. Measured in milliseconds.

Choose a direction for the slide, such as left or right.

When setting the alignment to the Left, the first slide in the carousel will appear on the far left side. Conversely, when setting the alignment to Right, the first slide will be positioned on the far right side of the carousel.

Determines the number of additional slides visible beyond the main visible slide.

  • None: No additional slides will be visible.
  • Both: Additional slides will be visible on both sides of the main slide.
  • Left: Additional slides will be visible only to the left of the main slide.
  • Right: Additional slides will be visible only to the right of the main slide.
Carousel widget 6 Carousel widget 461

Arrows are the default navigation icon. By clicking the arrows, you manually move to the previous and next slides. 

Toggle the button to disable arrows.

Icon – Replace the arrow icon used to view the previous slide:

  • Carousel widget 12 Carousel widget 463 Select not to display an icon 
  • Carousel widget 8 Carousel widget 465 Upload an SVG file to use as an icon. See Enable SVG support. 
  • Carousel widget 22 Carousel widget 467 Choose an icon from the icon library.
  • Orientation: Place the icon at the start, center or end of the Carousel.
  • Position: Use the slider to place the navigation icon exactly where you want it. For more details, see Units of measurement.
  • Orientation: Place the icon at the top, center or middle of the Carousel.
  • Position: Use the slider to place the navigation icon exactly where you want it.

Icon – Replace the arrow icon used to view the next slide:

  • Carousel widget 12 Carousel widget 463 Select not to display an icon 
  • Carousel widget 8 Carousel widget 465 Upload an SVG file to use as an icon. See Enable SVG support. 
  • Carousel widget 22 Carousel widget 467 Choose an icon from the icon library.
  • Orientation: Place the icon at the start, center, or end of the Carousel.
  • Position: Use the slider to place the navigation icon exactly where you want it. For more details, see Units of measurement
  • Orientation: Place the icon at the top, center, or middle of the Carousel.
  • Position: Use the slider to place the navigation icon exactly where you want it.
Carousel widget 4 Carousel widget 475

Choose how to indicate the page number:

  • a series of dots
  • a fraction 
  • a progress bar

If you want, you can also turn the pagination off.

Note: In the Style tab the pagination style changes depending on what method of pagination you use here. 

Style tab

In the Style tab, you can customize the visual appearance of various elements within the carousel, including slides, navigation icons, and pagination indicators. You can adjust parameters such as spacing, background type, border style, padding, icon size, typography, and color.

Carousel widget 9 Carousel widget 477

Use the slider to adjust the amount of space between slides.

Choose the background, for details, see Backgrounds.

Choose the border, for details, see Border types.

Choose the border radius, for details, see Border radius.

Add padding, for details, see Padding and margins.

Carousel widget 20 Carousel widget 479

Use the slider or the counter control to adjust the size of the icons that you use to manually move to the previous and next slides. For more details, see Units of measurement.

  • Normal:  determine how the dots will appear by default.
  • Hover: determine how the navigation  appears when you visitors mouse over them.

Choose a color: either use the color picker or a global color.

Choose the background type for the navigation arrows. For details, see Backgrounds.

Click the 🖋️ icon to add a shadow to the arrows. Learn more about shadows.

Choose the border radius, for details, see Border radius.

Add padding, for details, see Padding and margins.

From the menu, determine if the navigation icons appear Inside or Outside the carousel.

Carousel widget 10 Carousel widget 481

Represent the pages in your carousel by using dots positioned below the carousel.

Use the slider or the counter control to adjust the size of the dots representing the pages. For more details, see Units of measurement.

  • Normal: determine how the dots will appear by default.
  • Hover: determine how the dots appear when you mouse over them.

This option allows you to choose exactly where the dots appear within the carousel layout.

  • Horizontal Orientation & Position: Allows you to control the placement of the dots along the horizontal axis. For example, you can choose to align the dots to the left, center, or right side of the carousel, or even specify an exact distance from the edges of the container.
  • Vertical Orientation & Position: Allows you to control the placement of the dots along the vertical axis. Align them to the top, middle, or bottom of the carousel, or specify a precise distance from the top or bottom edges.

Use the slider or the counter control to adjust the amount of space between the dots and the slides. For more details, see Units of measurement.

Carousel widget 21 Carousel widget 483

Choose how your fractions will appear to visitors. For details, see Typography.

Choose a color: either use the color picker or a global color.

This option allows you to choose exactly where the fractions appear within the carousel layout.

  • Horizontal Orientation & Position: Allows you to control the placement of the fractions along the horizontal axis. For example, you can choose to align the dots to the left, center, or right side of the carousel, or even specify an exact distance from the edges of the container.
  • Vertical Orientation & Position: Allows you to control the placement of the fractions along the vertical axis. Align them to the top, middle, or bottom of the carousel, or specify a precise distance from the top or bottom edges.

Use the slider or the counter control to adjust the amount of space between the fractions and the slides. For more details, see Units of measurement.

Carousel widget 2 Carousel widget 485

Use the slider or the counter control to adjust the width of the progress bar. For details, see Units of measurement.

  • Normal: determine how the progress bar will appear by default.
  • Hover: determine how it will appear when visitors mouse over them.

Choose a color: either use the color picker or a global color.

Advanced tab

The Advanced tab provides options to control carousel position, adjust spacing, add custom code, and more.

Carousel widget 19 Carousel widget 487

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount

days
hours
minutes
seconds