{"id":104447,"date":"2023-02-13T18:03:56","date_gmt":"2023-02-13T12:33:56","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=104447"},"modified":"2023-02-13T18:03:56","modified_gmt":"2023-02-13T12:33:56","slug":"connect-a-carousel-with-tabs-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/connect-a-carousel-with-tabs-in-elementor\/","title":{"rendered":"How to connect a Carousel with Tabs in Elementor?"},"content":{"rendered":"\n<p>One of the most unique features of The Plus Addons for Elementor widgets is that you can create connections between their different widgets, making them really powerful and helping you in creating unique solutions.<\/p>\n\n\n\n<p>One such solution can be to connect your tabs with a carousel, in particular the Anything Carousel widget.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Tabs and Tours widget, <a href=\"\/docs\/tabs-tours-elementor-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure its installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/tabs-tours?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>To do this, follow the steps below &#8211;\u00a0<\/p>\n\n\n\n<p>1. Add the <strong>Anything Carousel<\/strong> widget on the page and add content from the Elementor template or Shortcode.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"297\" height=\"818\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/anything-carousel-template.png\" alt=\"anything carousel template\" class=\"wp-image-104448\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/anything-carousel-template.png 297w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/anything-carousel-template-109x300.png 109w\" sizes=\"(max-width: 297px) 100vw, 297px\" \/><\/figure>\n\n\n\n<p>2. Make sure the number of slides in your slider and the number of items in your tab is the same.<\/p>\n\n\n\n<p>3. Add an id in the <strong>Unique Carousel ID<\/strong> field of the Anything Carousel widget.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"297\" height=\"765\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/anything-carousel-id.png\" alt=\"anything carousel id\" class=\"wp-image-104449\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/anything-carousel-id.png 297w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/anything-carousel-id-116x300.png 116w\" sizes=\"(max-width: 297px) 100vw, 297px\" \/><\/figure>\n\n\n\n<p>4. Now go to the Tabs\/Tours widget <strong>Extra Options<\/strong> &gt; <strong>Carousel Connection ID<\/strong> and add the same id.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"297\" height=\"513\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-carousel-id.png\" alt=\"tabs carousel id\" class=\"wp-image-104450\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-carousel-id.png 297w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-carousel-id-174x300.png 174w\" sizes=\"(max-width: 297px) 100vw, 297px\" \/><\/figure>\n\n\n\n<p>With that, the connection has been established. Now if you click on the tabs the slider content will change too just like in the example below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1180\" height=\"582\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-slider-preview.gif\" alt=\"tabs slider preview\" class=\"wp-image-104452\"\/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: The Carousel Connection will not work properly if you are using Swiper Effect with Loop.<\/em><\/p>\n<\/blockquote>\n","protected":false},"author":16,"featured_media":104453,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[527,544],"class_list":["post-104447","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-plus-widgets","docs-tabs-tours"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=104447"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104447\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104453"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104447"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}