How to connect a Carousel with Tabs in Elementor?

Tabs and a slider often tell the same story: a list of plans, steps or products next to a picture of each one.

The Tabs/Tours widget from The Plus Addons for Elementor can drive a Carousel Anything widget. Both get the same ID; clicking a tab then moves the carousel to the matching slide.

To check the complete feature overview documentation of The Plus Addons for Elementor Tabs/Tours widget, click here.

Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.

Before You Start

• Edition: Pro — Carousel Connection ID needs The Plus Addons for Elementor Pro. The Tabs/Tours widget itself is free.
• Widget to enable: Tabs/Tours, switched on under The Plus Addons > Widgets.
• The Carousel Anything widget switched on as well.
• One Elementor template per slide (see how to create a template).

Step 1: Build the Carousel

1. Add the Carousel Anything widget to the page.
2. In Content, add one item per slide and choose a template for each. Add the slides in the same order as your tabs: the first tab goes to the first slide, the second tab to the second slide, and so on.
3. Open Extra Options and type an ID in Unique Carousel ID, for example plans.

Step 2: Connect the Tabs

1. Add the Tabs/Tours widget and add the same number of tabs as the carousel has slides.
2. Open Extra Option and type the same ID in Carousel Connection ID: plans.
3. Publish the page and check it on the front end.

Clicking a tab now moves the carousel to the slide with the same number.

How It Behaves

• Clicking the third tab moves the carousel to the third slide, and so on.
• It also works the other way: when the carousel moves to a slide, the tab with the same number becomes active.
• The connection also worked with Swiper Effect in Swipe mode.

Limitations

• Swiper Effect with Mode Slide and Loop on breaks the connection. In our test the third tab moved the carousel to the second slide, and moving the carousel no longer changed the tab. The editor shows a note about this when you turn Loop on.
• Tabs and slides are matched by position only. Keep them in the same order.
• Carousel Connection ID is not part of the free plugin. The Unique Carousel ID field is in the free Carousel Anything widget, but the tabs side needs Pro.

Troubleshooting

Clicking a tab does not move the carousel

• Check that both IDs are exactly the same, with no spaces.
• Use only one carousel with that ID on the page.
• If the tabs use Swiper Effect, turn Loop off or use Swipe mode.

The carousel shows the wrong slide

Put the carousel items in the same order as the tabs.

Related Docs

• Tabs/Tours widget: settings overview
• Use an Elementor template inside tabs
• Add a swipe or slide effect to tabs
• Sync carousel widgets