---
title: "How to create Vertical WordPress Carousel Slider?"
url: https://nexterwp.com/docs/vertical-wordpress-carousel-slider/
date: 2023-02-17
modified: 2026-09-21
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://nexterwp.com/wp-content/uploads/2024/05/vertical-wordpress-carousel-slider-1024x519.jpg
word_count: 540
---

# How to create Vertical WordPress Carousel Slider?

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.

[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 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.

## Video Tutorial

Switching the Carousel Anything block from Horizontal to Vertical layout in one click.

## 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 default `ltr`.- **The height is rendered with its unit** — measured, 400 with px produced `height: "400px"`, alongside a `heightRatio` of 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-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.- **Autoplay is on by default.** Measured: a carousel with nothing configured rendered `autoplay: true` with a 1500 ms interval. If you want a static carousel you have to switch it off deliberately — see the [autoplay guide](https://nexterwp.com/docs/wordpress-carousel-slider-autoplay/).- **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.

## Related Docs

- [Add Carousel Anything in WordPress](https://nexterwp.com/docs/add-carousel-anything-in-wordpress/)- [Multiple columned carousel slider](https://nexterwp.com/docs/multiple-columned-wordpress-carousel-slider/)- [Carousel infinite loop scroll](https://nexterwp.com/docs/carousel-infinite-loop-scroll-in-wordpress-carousel-slider/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)