Before and After

Compare two slides with a draggable divider.

How to use

Choose left and right source slides.
Set the initial percentage, handle color and labels.
Drag both ways and check that both slides load.

Things to check

Sources are slide identifiers; do not link the comparison to its own slide.

Property reference

Select the module in the editor to change its settings. Technical identifiers below are kept unchanged for reference; some advanced fields are stored as structured data rather than separate controls.

Find a property

8 / 8

dividerWidth

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

fillContainer

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

handleColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

leftPageId

The left source slide for comparison; uses an accessible slide identifier rather than an image URL.

string

rightPageId

The right source slide for comparison; do not select the comparison block own slide.

string

showLabel

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

showPageNames

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

sliderPosition

The comparison divider initial percentage, determining the visible proportion of each side.

number