Skip to content

How to create Full Width Carousel Slider in Elementor?

Table Of Content

A hero slider or a banner carousel often needs to reach both edges of the screen.

The Carousel Anything widget from The Plus Addons for Elementor always fills the space it is given, so a full width carousel is set up with Elementor’s own page and container settings. There is no separate full width switch in the widget.

To check the complete feature overview documentation of The Plus Addons for Elementor Carousel Anything 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: Free — this works in the free plugin; Pro is not needed.
  • Widget to enable: Carousel Anything, switched on under The Plus Addons > Widgets.
  • Slides: one saved Elementor template per slide, created under Templates > Saved Templates and published.

Step 1: Choose a Full Width Page Layout

  1. Open the page in Elementor and click the Page Settings icon.
  2. Set Page Layout to Elementor Canvas (no header or footer) or Elementor Full Width (keeps your theme’s header and footer).
The page layout option in page settings set to elementor canvas

Step 2: Make the Container Full Width

  1. Select the container that holds the carousel.
  2. In Layout, set Content Width to Full Width.
The content width option of an elementor container set to full width
  1. Open Advanced and set Padding to 0 on all sides.
The padding fields of the container in the advanced tab set to 0

Add the Carousel Anything widget to this container and add your slides. Publish the page to see the result.

Demo of a carousel anything slider stretched across the full width of the browser

How It Behaves

  • With Elementor Canvas or Elementor Full Width, a Full Width container and no padding, the carousel was exactly as wide as the browser window (1200 px on a 1200 px screen, 390 px on a phone-sized screen).
  • A Boxed container keeps the carousel at the boxed width, minus its padding.

Limitations

  • The page layout matters. On our test site (Twenty Twenty-Five theme), the same full width container on the theme’s default layout was only 645 px wide, because the theme limits the content width.
  • These steps were checked with Elementor containers. Classic sections were not tested.

Troubleshooting

There is still a gap at the sides

  • Check the container’s Padding in the Advanced tab.
  • Check that Content Width is Full Width.
  • Check that Page Layout is Elementor Canvas or Elementor Full Width.

Related Docs

Related Frequently Asked Questions

Related Docs