--- title: "How to create multiple columned WordPress Carousel Slider?" url: https://nexterwp.com/docs/multiple-columned-wordpress-carousel-slider/ date: 2023-02-17 modified: 2026-09-28 lang: en author: "Aditya Sharma" description: "A carousel of cards works best when the visitor can compare a few at once. Showing one at a time turns comparison into memory. Setting the column count puts several..." image: https://nexterwp.com/wp-content/uploads/2024/05/multiple-columned-wordpress-carousel-slider-1024x519.jpg word_count: 504 --- # How to create multiple columned WordPress Carousel Slider? ## Key Takeaways - Carousel Anything en Nexter Blocks Pro muestra varias diapositivas a la vez y guarda columnas por punto de corte, con 3 en escritorio, 2 en tablet y 1 en teléfono como ejemplo medido. - Nexter Blocks Pro escribe toda la configuración del carrusel en el atributo data-splide, que es lo que lee el script del slider. - El carrusel no se mueve si no hay más diapositivas que columnas, y con Nexter Blocks Pro desactivado no se renderiza nada. A carousel of cards works best when the visitor can compare a few at once. Showing one at a time turns comparison into memory. Setting the column count puts several slides side by side, and each screen size can have its own number. [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 **Carousel Anything** block with more slides than columns — 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 - Select your **Carousel Anything** block. ![Carousel Anything block, Content panel with the Layout and Column options](https://nexterwp.com/wp-content/uploads/2026/09/rs-ac-column.webp) - Set the number of **columns** for desktop. - Set a smaller number for **tablet**. - Set **phone** to one, in almost every case. - Add spacing between the slides so the cards do not touch. - Publish and check all three widths. ## How It Behaves The column count is the number of slides visible at once, stored separately for each breakpoint. - **Measured on a published page:** three columns on desktop, two on tablet and one on phone rendered as `perPage: 3` with `breakpoints.1024.perPage: 2` and `breakpoints.767.perPage: 1`.- **The breakpoints are 1024 and 767 pixels**, measured — tablet and phone respectively.- **Unset values are inherited from the size above**, measured. Setting only desktop gives a phone the desktop column count.- **Columns and movement are separate.** See the [slides guide](https://nexterwp.com/docs/increase-slide-in-wordpress-carousel/) for how many move per step.- **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, nothing renders.- **Columns divide the available width.** Four columns in a sidebar gives four unusably narrow slides — the container width matters as much as the count.- **You need more slides than columns.** Three slides in three columns is a static row that happens to be a carousel.- **Uneven content shows badly side by side**, because a short card next to a tall one is obvious. Equal height helps.- **Do not leave the phone value unset.** It is the commonest mistake with this setting. ## Troubleshooting ### All the slides are squashed together Too many columns for the width available. Reduce the count, or widen the container — see the [Container block guide](https://nexterwp.com/docs/add-a-container-in-wordpress/). ### It shows three columns on my phone The phone breakpoint has not been set, so the desktop value is inherited. Set it to one. ### The carousel will not move There are no more slides than columns. Add slides. ### The cards are different heights Side-by-side slides expose that. Trim the content, or use equal height on the slide contents. ## Related Docs - [Increase slides in a WordPress carousel](https://nexterwp.com/docs/increase-slide-in-wordpress-carousel/)- [Add Carousel Anything in WordPress](https://nexterwp.com/docs/add-carousel-anything-in-wordpress/)- [Full width carousel slider in WordPress](https://nexterwp.com/docs/full-width-carousel-slider-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before creating a multiple columned WordPress carousel slider?** A: The Carousel Anything block is Pro-only, and it needs more slides than columns or the carousel has nothing to move through. Nexter Blocks Pro enables the block under Nexter > Blocks in your WordPress dashboard. A one-slide carousel will look idle because there is no next item to advance to, so testing with several slides catches setup issues early. **Q: How many columns should I use on desktop, tablet, and phone for a card carousel?** A: The page’s default pattern is three columns on desktop, two on tablet, and one on phone. That keeps comparison readable without crushing the cards into narrow strips. The column count is stored separately per breakpoint, so each screen size can behave differently instead of inheriting one global layout. **Q: Why are my carousel slides squashed together?** A: That usually means there are too many columns for the width available. Columns divide the available space, so four columns inside a narrow container can make every slide look cramped. Reducing the column count or widening the container fixes the layout pressure; adding spacing between slides also helps keep cards from touching. **Q: Why does my carousel show three columns on mobile?** A: The phone breakpoint was probably left unset, so it inherited the desktop column count. The page says phone should be set to one in almost every case, and that is the commonest mistake with this setting. Nexter Blocks stores breakpoint values separately, so leaving one blank can carry an unwanted desktop layout down to smaller screens. **Q: Why will my carousel not move?** A: A carousel needs more slides than columns to have anything to advance through. If you have three slides and three columns, it behaves like a static row rather than a moving slider. Adding more slides than visible columns gives the script enough items to scroll through. **Q: What is the best way to handle cards with different heights in a multi-column carousel?** A: Equal height matters here because side-by-side cards expose height differences immediately. A short card next to a tall one looks uneven fast, especially in a multi-column layout. Trimming content or using equal height on the slide contents keeps the row visually aligned and makes comparison easier for visitors.