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.
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.
- 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.
- 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: 3withbreakpoints.1024.perPage: 2andbreakpoints.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 for how many move per step.
- Every setting ends up in one place. The block writes its whole configuration into a
data-splideattribute 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.
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.
