{"id":104606,"date":"2023-02-16T17:24:23","date_gmt":"2023-02-16T11:54:23","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=104606"},"modified":"2023-02-16T17:24:23","modified_gmt":"2023-02-16T11:54:23","slug":"full-width-carousel-slider-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/full-width-carousel-slider-in-elementor\/","title":{"rendered":"How to create Full Width Carousel Slider in Elementor?"},"content":{"rendered":"\n<p>Are you looking for a way to create a full width carousel slider in Elementor?&nbsp;<\/p>\n\n\n\n<p>Carousel sliders can help you display multiple photos and videos in a creative and engaging way. With the Carousel Anything widget, you can easily create a full width carousel slider that is mobile responsive and looks great on all devices.<\/p>\n\n\n\n<p>We\u2019ll see how you can use The Plus Addons for Elementor Carousel Anything widget to create amazing full width carousel sliders.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Carousel Anything widget, <a href=\"\/docs\/carousel-anything-elementor-widget-settings-overview\/\">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-anything?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<h4 class=\"wp-block-heading\">For Classic Elementor Sections<\/h4>\n\n\n\n<p>In order to create a full width carousel slider in Elementor make sure you are using a full width template like the <strong>Elementor Canvas<\/strong> or <strong>Elementor Full Width<\/strong> template for your page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"301\" height=\"954\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/page-template.png\" alt=\"page template\" class=\"wp-image-104607\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/page-template.png 301w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/page-template-95x300.png 95w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/figure>\n\n\n\n<p>If you are using the Elementor Full Width template, make sure that your theme allows full width containers.<\/p>\n\n\n\n<p>Now create a single column section on the page and from the Layout set the <strong>Column Width<\/strong> to <strong>Full Width<\/strong> and <strong>Column Gap<\/strong> to <strong>No Gap<\/strong> so there are no gaps in the container.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"300\" height=\"589\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/elementor-full-width-settings.png\" alt=\"elementor full width settings\" class=\"wp-image-104608\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/elementor-full-width-settings.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/elementor-full-width-settings-153x300.png 153w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>Now your section will be full width, but for some reason if it doesn\u2019t, then turn on the <strong>Stretch Section<\/strong> toggle.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">For Flexbox Container<\/h4>\n\n\n\n<p>In case, you\u2019re using the Elementor Flexbox container, after adding the section on the page set the <strong>Content Width<\/strong> to <strong>Full Width<\/strong> from the <strong>Container<\/strong> tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"301\" height=\"754\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/elementor-full-width-settings-flexbox.png\" alt=\"elementor full width settings flexbox\" class=\"wp-image-104609\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/elementor-full-width-settings-flexbox.png 301w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/elementor-full-width-settings-flexbox-120x300.png 120w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/figure>\n\n\n\n<p>And to remove the gaps from the container, set the padding to 0 from the Advanced tab.&nbsp;<\/p>\n\n\n\n<p>Once you have set your section to full width, just add the Carousel Anything widget on the section and add the content using Elementor templates.<\/p>\n\n\n\n<p>Make sure the Elementor templates are also created using full width section following the process shown above.<\/p>\n\n\n\n<p>With the settings in place, you can create a beautiful full width carousel slider like the example below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"791\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/full-width-carousel-demo.gif\" alt=\"full width carousel demo\" class=\"wp-image-104610\"\/><\/figure>\n\n\n\n<p>Also, check <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/multiple-columned-elementor-carousel-slider\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to create multiple columned Elementor Carousel Slider<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":104611,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[550,527],"class_list":["post-104606","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-carousel-anything","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104606","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=104606"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104606\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104611"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104606"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}