--- title: "How to connect a Carousel with Tabs in Elementor?" url: https://theplusaddons.com/docs/connect-a-carousel-with-tabs-in-elementor/ date: 2023-02-13 modified: 2026-09-13 lang: en author: "Aditya Sharma" description: "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..." image: https://theplusaddons.com/wp-content/uploads/2023/02/How-to-connect-a-Carousel-with-tabs-in-Elementor_-1024x536.jpg word_count: 480 --- # How to connect a Carousel with Tabs in Elementor? ## - The Tabs/Tours widget from The Plus Addons for Elementor drives a Carousel Anything widget when both use the same ID, so clicking a tab moves the carousel to the matching slide. - The setup uses one Elementor template per slide, with the carousel items and tabs kept in the same order so the first tab matches the first slide and the third tab matches the third slide. - Swiper Effect works in Swipe mode, but Swiper Effect with Mode Slide and Loop on breaks the connection, and Carousel Connection ID needs The Plus Addons for Elementor Pro. 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](https://theplusaddons.com/docs/tabs-tours-elementor-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/tabs/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## 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](https://theplusaddons.com/docs/elementor-template-inside-tabs-widget/)). ## Step 1: Build the Carousel - Add the **Carousel Anything** widget to the page.- 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.- Open **Extra Options** and type an ID in **Unique Carousel ID**, for example `plans`. ![The Unique Carousel ID field in the Extra Options section of the Carousel Anything widget](https://theplusaddons.com/wp-content/uploads/2026/09/tabs-carousel-id.webp) ## Step 2: Connect the Tabs - Add the **Tabs/Tours** widget and add the same number of tabs as the carousel has slides.- Open **Extra Option** and type the same ID in **Carousel Connection ID**: `plans`.- Publish the page and check it on the front end. ![The Carousel Connection ID field in the Extra Option section of the Tabs/Tours widget](https://theplusaddons.com/wp-content/uploads/2026/09/tabs-connection-id.webp) Clicking a tab now moves the carousel to the slide with the same number. ![Clicking tabs that move a connected carousel to the matching slide](https://theplusaddons.com/wp-content/uploads/2023/02/tabs-slider-preview.gif) ## 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](https://theplusaddons.com/docs/tabs-tours-elementor-widget-settings-overview/)- [Use an Elementor template inside tabs](https://theplusaddons.com/docs/elementor-template-inside-tabs-widget/)- [Add a swipe or slide effect to tabs](https://theplusaddons.com/docs/swipe-or-slide-effect-on-elementor-tabs/)- [Sync carousel widgets](https://theplusaddons.com/docs/carousel-widgets-remotesync-elementor/) ## Frequently Asked Questions **Q: What do I need before I connect a carousel with tabs in Elementor?** A: The setup depends on The Plus Addons for Elementor Pro because the Carousel Connection ID needs Pro, while the Tabs/Tours widget itself is free. You also need both widgets switched on under The Plus Addons > Widgets, plus the Carousel Anything widget enabled. A practical gotcha is that each slide should use one Elementor template, so the carousel structure is ready before you try to sync it with tabs. **Q: How do tabs control a carousel in Elementor?** A: The connection works by matching the same ID on both widgets. The Carousel Anything widget gets a Unique Carousel ID, and the Tabs/Tours widget gets the same value in Carousel Connection ID. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses that shared ID to link tab position to slide position, so the first tab targets the first slide and so on. **Q: Why does my tab click not move the carousel?** A: The most common cause is an ID mismatch. Both widgets need exactly the same ID with no spaces, and only one carousel should use that ID on the page. Another gotcha is Swiper Effect in Slide mode with Loop turned on, which breaks the connection. In that case, turning Loop off or using Swipe mode is the fix described in the tutorial. **Q: What is the best way to order tabs and slides when syncing them?** A: Keep tabs and slides in exactly the same order because The Plus Addons for Elementor matches them by position only. If your first tab describes plans and your first slide shows something else, the sync will feel wrong even though the IDs are correct. The safest setup is to build both lists side by side and mirror their sequence before publishing. **Q: Does this tab-to-carousel setup work with Swiper Effect?** A: Swiper Effect works in Swipe mode, and the tutorial says that connection also worked there during testing. The limitation shows up when Swiper Effect uses Mode Slide with Loop on, because that breaks tab-to-slide syncing. That makes mode choice important if you want stable behavior between Tabs/Tours and Carousel Anything.