A sideways carousel competes with the page’s own scrolling. In a narrow column, or beside a block of text, moving vertically often reads better.
Carousel Anything can run top to bottom instead of left to right, with a height you set.
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 several slides — 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.
Video Tutorial
Steps
- Select your Carousel Anything block.
- Set the slider direction to vertical.
- Give the carousel a height. A vertical carousel needs one, because there is no content width to derive it from.
- Set the height for tablet and phone as well.
- Publish and check the real page.
How It Behaves
The direction and height are written into the carousel configuration.
- Measured on a published page: setting vertical rendered
direction: "ttb"(top to bottom) in place of the defaultltr. - The height is rendered with its unit — measured, 400 with px produced
height: "400px", alongside aheightRatioof 0.5 as a fallback. - Height is per device, measured as separate entries at the 1024 and 767 breakpoints. Without them the desktop height applies to a phone too.
- 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. - Autoplay is on by default. Measured: a carousel with nothing configured rendered
autoplay: truewith a 1500 ms interval. If you want a static carousel you have to switch it off deliberately — see the autoplay guide. - 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.
- A height is effectively required. Without one the carousel has no vertical space to work in and collapses.
- It competes with page scrolling. A visitor scrolling down the page may catch the carousel instead — worth testing on a touch screen.
- Tall slides do not suit phones. A 400 pixel carousel is a large share of a phone screen; set a smaller height at that breakpoint.
- Vertical and centre mode together are rarely readable. Pick one.
Troubleshooting
The carousel is invisible or collapsed
No height is set. A vertical carousel cannot work one out for itself — give it one.
It still moves sideways
The direction is still horizontal. Measured, vertical renders direction: "ttb"; if that is not present, the setting has not applied.
It is too tall on mobile
Set a smaller height at the tablet and phone breakpoints — the desktop height is inherited otherwise.
Scrolling the page moves the carousel
The two scrolls are competing. Reduce the carousel height so the page can be scrolled past it.
