--- title: "How to create Full Width Carousel Slider in WordPress?" url: https://nexterwp.com/docs/full-width-carousel-slider-in-wordpress/ date: 2023-02-17 modified: 2026-08-31 author: "Aditya Sharma" description: "What It Does A full-width carousel slider extends the Carousel Anything block from one edge of the browser to the other, instead of staying inside the page's normal content width...." image: https://nexterwp.com/wp-content/uploads/2024/05/full-width-carousel-slider-in-wordpress-1024x519.jpg word_count: 648 --- # How to create Full Width Carousel Slider in WordPress? ## Key Takeaways - Nexter Blocks Container sets the full-width layout, because Carousel Anything has no width control of its own and fills only its parent Container. - Container block uses Content Width: Full and a Width field in px, %, or vw, so the slider spans exactly 100vw regardless of the theme content-width setting. - Carousel Anything keeps its slides, transitions, dots and arrows, and autoplay working the same inside a full-width Container as inside a boxed container. - Full-width carousel suits e-commerce homepages, agency or portfolio hero sliders, and landing pages that highlight testimonials or key benefits. ## What It Does A full-width carousel slider extends the Carousel Anything block from one edge of the browser to the other, instead of staying inside the page's normal content width. This is done by wrapping the carousel in a Container block set to full width, since Carousel Anything has no width control of its own. *To check the complete feature overview documentation of the Nexter Blocks Carousel Anything block, [click here](/docs/carousel-anything-block-settings-overview/).* **Requirement** – This block is a part of Nexter Blocks. Make sure it is installed and activated. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-carousel-sliders/) ## Why It Matters A carousel that stops at the page's boxed content width can feel cramped for hero sections, promotional banners, and feature highlights. Extending it edge-to-edge gives it more visual weight and makes it read as a dedicated section rather than one more block in the content column. ## What You Get - A Container block with a **Content Width: Full** option and a **Width** field (px / % / vw)- A Carousel Anything block that fills whatever width its parent Container gives it ## Benefits - E-commerce homepages showcasing featured products or promotional banners in an edge-to-edge layout- Agency or portfolio sites displaying project images in a full-screen hero slider- Landing pages using a full-width carousel to highlight testimonials or key benefits ## Capabilities The Container's Width field accepts a percentage or a viewport-width (vw) unit, so the slider can span exactly 100vw of the browser regardless of any theme content-width setting. Everything else about the carousel – slides, transitions, dots and arrows, autoplay – works the same as it does inside a boxed container. ## How It Works Making a full-width carousel in the WordPress Block editor requires the Nexter Blocks Container block as the outer wrapper. The Container block controls the width, and the Carousel Anything block sits inside it to fill that space. ## How to Use It To create a full-width slider, add the Container block from Nexter Blocks and follow the steps below. 1. Set the container width to **Full** from the **Content Width** section and set the **Width** to 100% or vw. ![Container Layout panel with Content Width set to Full showing the Width field in vw units](https://nexterwp.com/wp-content/uploads/2023/02/container-content-width-full-vw.png)Container > Layout with Content Width set to Full, showing the Width field defaulting to 100vw Setting Content Width to Full and Width to vw on the Container block 2. Add the Carousel Anything block inside the Container block and add your slides. The carousel has no width setting of its own, shown below – it always fills the width of its parent. ![Carousel Anything block inspector Layout tab with no width or full width control present](https://nexterwp.com/wp-content/uploads/2023/02/carousel-anything-layout-no-width-control.png)Carousel Anything's own Layout tab – no width control, confirming the Container wrapper is required for full width The carousel slider will now span the full width of the page. The finished full-width carousel slider Also, check [How to create multiple columned WordPress Carousel Slider](https://nexterwp.com/docs/multiple-columned-wordpress-carousel-slider/). ## Use Cases - E-commerce homepages showcasing featured products or promotional banners in an edge-to-edge layout- Agency or portfolio sites displaying project images in a full-screen hero slider- Landing pages using a full-width carousel to highlight testimonials or key benefits ## Limitations - Carousel Anything has no built-in width or full-width option of its own – the Container wrapper is required, not just a convenience.- Content Width must be set to Full on the Container before the Width field switches to accept vw – setting Width alone on a Boxed container will not extend it edge-to-edge.- A full-width carousel ignores the theme's normal content-width setting, so any surrounding text content will look narrower by comparison – plan the layout around that contrast intentionally. ## Troubleshooting - **Carousel still looks boxed** – check the wrapping Container's Content Width is set to Full, not Boxed; the Width field only takes effect once Full is selected.- **Width field won't accept vw** – the unit dropdown next to Width only appears after Content Width is switched to Full; open Container > Layout and confirm Full is selected first.- **Looking for a width setting on the carousel itself** – Carousel Anything's own Layout/Advanced tabs have no width control; width is controlled entirely by the parent Container.