{"id":104668,"date":"2023-02-18T15:59:52","date_gmt":"2023-02-18T10:29:52","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=104668"},"modified":"2023-02-18T15:59:52","modified_gmt":"2023-02-18T10:29:52","slug":"carousel-remote-sync-with-elementor-image-carousel","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/carousel-remote-sync-with-elementor-image-carousel\/","title":{"rendered":"How to connect a Carousel Remote Sync (Dots &amp; Arrows) with Elementor Image Carousel?"},"content":{"rendered":"\n<p>Having an image gallery on your website is an effective way to showcase your products and services. Not only does it help to draw attention to your business, but it also helps to engage and inform your visitors.&nbsp;<\/p>\n\n\n\n<p>With the Gallery Listing widget from The Plus Addons for Elementor, you can easily turn your image gallery into a beautiful interactive carousel.<\/p>\n\n\n\n<p>But by connecting the Gallery Listing widget with the Carousel Remote widget, you can provide your users with some truly unique navigation options.<\/p>\n\n\n\n<p>Here we\u2019ll see how you can connect the Gallery Listing widget with the Carousel Remote widget which will allow you to control your image gallery navigation from anywhere on the page.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Carousel Remote widget, <a href=\"\/docs\/carousel-remote-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\/carousel-remote?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>For this process, first drag and drop the Carousel Remote widget and the Gallery Listing widget, and then follow the below steps:&nbsp;<\/p>\n\n\n\n<p>1. Once you add the Gallery Listing widget, add images to the gallery from the <strong>Content<\/strong> tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"446\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/gallery-listing-content.png\" alt=\"gallery listing content\" class=\"wp-image-104669\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/gallery-listing-content.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/gallery-listing-content-202x300.png 202w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>2. Then, from the Layout tab, make sure the <strong>Layout<\/strong> is set to <strong>Carousel<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"299\" height=\"411\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/gallery-listing-layout.png\" alt=\"gallery listing layout\" class=\"wp-image-104670\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/gallery-listing-layout.png 299w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/gallery-listing-layout-218x300.png 218w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/figure>\n\n\n\n<p>3. After that, go to the <strong>Style<\/strong> tab &gt; <strong>Carousel Options<\/strong> and add a unique id in the <strong>Unique Carousel ID<\/strong> field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"299\" height=\"970\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/gallery-listing-uc-id.png\" alt=\"gallery listing unique connection id\" class=\"wp-image-104671\"\/><\/figure>\n\n\n\n<p>4. Now select the Carousel Remote widget, then go to the <strong>Content<\/strong> tab, add the same ID in the <strong>Unique Connection ID<\/strong> field and make sure <strong>Remote Type<\/strong> is selected as <strong>Carousel<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"408\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/carousel-remote-uc-id-remote.png\" alt=\"carousel remote unique connection id remote\" class=\"wp-image-104662\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/carousel-remote-uc-id-remote.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/carousel-remote-uc-id-remote-221x300.png 221w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>5. Now, you can have two different types of navigation, a Next and Previous button and Dots (image or icon). You can use either one or both.<\/p>\n\n\n\n<p>a) To use the next previous button go to <strong>Prev\/Next<\/strong> tab and turn on the <strong>Next\/Prev Button<\/strong> toggle. You\u2019ll find some customisation options as well.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"495\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/remote-next-prev.png\" alt=\"carousel remote next prev\" class=\"wp-image-104629\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/remote-next-prev.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/remote-next-prev-182x300.png 182w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>6) But if you want to use dot navigation, then go to the <strong>Dots<\/strong> tab and turn on the <strong>Dots<\/strong> toggle. Now, make sure to have the same number of dot items as the number of slides in your Gallery Listing widget. You will get some customisation options for your dot navigation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"652\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/remote-dots.png\" alt=\"carousel remote dots\" class=\"wp-image-104630\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/remote-dots.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/remote-dots-138x300.png 138w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: You should disable all the navigation options for the Gallery Listing widget for the best user experience.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>That\u2019s it! Now you can control the image gallery carousel with the Carousel Remote widget.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"568\" height=\"623\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/carousel-remote-image-gallery-demo.gif\" alt=\"carousel remote image gallery demo\" class=\"wp-image-104672\"\/><\/figure>\n\n\n\n<p>Also, check <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/connect-carousel-remote-with-elementor-switcher\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to connect the Switcher widget with the Carousel Remote widget<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":104675,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[547,527],"class_list":["post-104668","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-carousel-remote","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104668","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=104668"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104668\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104675"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104668"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}