--- 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-09-28 lang: en author: "Aditya Sharma" description: "A carousel constrained to the content column looks like part of the article. Running it edge to edge makes it a section in its own right, which is usually what..." image: https://nexterwp.com/wp-content/uploads/2024/05/full-width-carousel-slider-in-wordpress-1024x519.jpg word_count: 590 --- # How to create Full Width Carousel Slider in WordPress? ## Key Takeaways - Nexter Blocks Pro activa el bloque Carousel Anything, y sin él el carrusel no renderiza nada, sin wrapper, configuración ni slides. - El ancho completo depende del Container block: debe estar en full width y sin side padding, porque el carrusel solo llena el espacio que le da su contenedor. - Más slides visibles y centre mode ayudan en pantallas grandes, mientras que imágenes pequeñas o contenido que desborda pueden causar aspecto vacío o desplazamiento lateral. A carousel constrained to the content column looks like part of the article. Running it edge to edge makes it a section in its own right, which is usually what a hero slider wants. Full width is not a carousel setting — it comes from the container the carousel sits in. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-carousel-sliders/) ## Before You Start - **Edition:** **Pro** — the Carousel Anything block needs Nexter Blocks Pro.- **Block to enable:** Carousel Anything, switched on under **Nexter > Blocks** in your WordPress dashboard.- A **Container** block to hold the carousel — see the [Container block guide](https://nexterwp.com/docs/add-a-container-in-wordpress/).- A **Carousel Anything** block with several slides — see the [Carousel Anything guide](https://nexterwp.com/docs/add-carousel-anything-in-wordpress/).- **Test with several slides.** A carousel with one slide has nothing to move to, so most settings will look broken when they are simply idle. ## Steps - Add a **Container** and set its width to **full**. ![Setting the container to full width](https://nexterwp.com/wp-content/uploads/2023/02/container-content-width-full-vw.webp) - Remove the container's side padding, or the carousel will stop short of the edges. - Put the **Carousel Anything** block inside it. ![Adding the carousel inside the container](https://nexterwp.com/wp-content/uploads/2023/02/carousel-anything-layout-no-width-control.webp) - Set the number of visible slides — a full width carousel usually wants more than one. - Publish and check the real page at every width. ## How It Behaves The carousel fills whatever space its container gives it, so the container is what you configure. - **Width comes from the container, not the carousel.** Measured in the Container wave: a container set to full width renders the full-width class, and a wide one renders `tpgb-container-wide`. The carousel simply fills it.- **Container padding is the usual culprit.** A full width container with side padding produces a carousel that is nearly full width and looks like a mistake.- **More visible slides suit more width.** One slide across a wide screen leaves a very large single item — see the [multiple columns guide](https://nexterwp.com/docs/multiple-columned-wordpress-carousel-slider/).- **Centre mode pairs well with full width**, measured: it renders `focus: "center"` with a padding value, showing part of the neighbouring slides at each edge.- **Every setting ends up in one place.** The block writes its whole configuration into a `data-splide` attribute on the carousel, which is what the slider script reads. If a setting is not doing what you expect, that attribute is where to look.- **Measured with Nexter Blocks Pro deactivated:** the carousel renders nothing at all — no wrapper, no configuration and no slides. This is a Pro-only block. ## Limitations - **Pro only** — measured with Nexter Blocks Pro deactivated, the carousel renders nothing at all, leaving an empty full-width container.- **Some themes constrain the page anyway.** A theme wrapper can stop a full width container reaching the edges; a full width page template usually fixes it.- **Full width means very wide slides on a large monitor.** Content designed at 1200px can look sparse at 2560px.- **Edge-to-edge images need to be large**, or they will soften when stretched.- **Full width can cause sideways scrolling** if anything inside overflows — check on a phone. ## Troubleshooting ### It is not reaching the edges Either the container is not set to full width, or it still has side padding. Check both — padding is the more common cause. ### My theme is constraining it Switch the page to a full width template. Some themes wrap all content in a fixed-width element that the container cannot escape. ### The slides are enormous on a big screen Increase the number of visible slides at desktop, or use centre mode so neighbouring slides show at the edges. ### The page scrolls sideways now Something inside the container is overflowing. Check the carousel spacing and any negative margins. ## Related Docs - [Add a container in WordPress](https://nexterwp.com/docs/add-a-container-in-wordpress/)- [Multiple columned carousel slider](https://nexterwp.com/docs/multiple-columned-wordpress-carousel-slider/)- [Add Carousel Anything in WordPress](https://nexterwp.com/docs/add-carousel-anything-in-wordpress/)- [Increase slides in a WordPress carousel](https://nexterwp.com/docs/increase-slide-in-wordpress-carousel/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)