---
title: "How to Add a Vertical Before and After Comparison Slider in WordPress?"
url: https://nexterwp.com/docs/add-a-vertical-before-and-after-comparison-slider-in-wordpress/
date: 2024-12-05
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "Some comparisons run down the frame rather than across it — a roof, a facade, a long before-and-after of a room shot from the doorway. Vertical mode wipes the before..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Vertical-Before-and-After-Comparison-Slider-in-WordPress_-1024x519.jpg
word_count: 522
---

# How to Add a Vertical Before and After Comparison Slider in WordPress?

## Key Takeaways

- Nexter Blocks Before After block creates a vertical before and after slider in WordPress when the Content tab is set to Vertical in the Mode section.
- Before Image tab adds the before image through Select Before Image, and the Before Label field adds a label for that image.
- After Image tab adds the after image through Select After Image, and the After Label field adds a label for that image.

Some comparisons run down the frame rather than across it — a roof, a facade, a long before-and-after of a room shot from the doorway.

Vertical mode wipes the before image from top to bottom instead of left to right.

*For every Before After setting in one place, see the [Before After feature guide](https://nexterwp.com/docs/add-before-after-image-comparison-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-before-after-image-comparison-slider/)

## Before You Start

- **Edition:** **Pro** — the Before After block needs Nexter Blocks Pro.- **Block to enable:** Before After, switched on under **Nexter > Blocks** in your WordPress dashboard.

## Steps

- Add the **Before After** block and set **Mode** to **Vertical**.

- Set both **Select Before Image** and **Select After Image**.

- Open **Separator Option** and switch **Separator Line** on — vertical mode needs this, see the note below.

- Optionally set a **Separator Icon** and a start position.

> ***Vertical mode needs a separator to work.** Measured on published pages: with **Separator Line** off and no **Separator Icon** — the defaults for a new block — the vertical slider stays frozen at its start position and the browser console reports a script error. Switch **Separator Line** on, or set a **Separator Icon**, and it tracks the pointer correctly. This is a known bug and has been reported to the development team.*

## How It Behaves

- Once a separator line or icon is present, the before image is revealed from the top down as the pointer moves — measured on a published page, the before panel went from 120px tall near the top to 680px near the bottom.- The comparison follows vertical pointer movement, not horizontal — moving sideways across a vertical block does nothing.- Everything else behaves as in Horizontal mode: the same image pair, the same labels, the same On Mouse Hover behaviour.

![A published Before After block in Vertical mode, partway through the reveal](https://nexterwp.com/wp-content/uploads/2026/09/ba-fe-vertical.webp)

## Limitations

- **A vertical block with no separator line and no separator icon does not move at all** — measured, it stays at its start position and the browser console reports a script error. Reported to the development team; switching the separator line on is the workaround.- Horizontal mode is not affected by this and works with no separator at all.- Give both images the same dimensions. Measured with a 1200x800 before and a 900x900 after, the widget takes the after image's size, so a mismatch crops or letterboxes the comparison.- **Both images are required.** With only one set, the block prints "Please select a Before images & After Image" on the page instead of the comparison — measured on a published page.

## Troubleshooting

### The vertical slider is stuck and will not move

Switch **Separator Line** on under **Separator Option**, or set a **Separator Icon**. Measured: with neither, a vertical block never moves; with either, it tracks the pointer normally.

### It only responds when I move the mouse up and down

That is correct for this mode — vertical mode follows vertical movement. Use [Horizontal mode](https://nexterwp.com/docs/add-before-after-image-comparison-in-wordpress/) if you want a left-to-right wipe.

### I see a script error in the browser console

That is the same known issue — it appears when a vertical block has no separator icon. Setting a **Separator Icon** clears it, and it has been reported to the development team.

## Related Docs

- [Before After feature guide](https://nexterwp.com/docs/add-before-after-image-comparison-in-wordpress/)- [Opacity comparison slider](https://nexterwp.com/docs/add-a-before-and-after-opacity-slider-in-wordpress/)- [Image block](https://nexterwp.com/docs/add-image-in-wordpress/)- [Advanced tab](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)