Beforely – Before After Image Slider

Description

Beforely puts a “before” photo and an “after” photo on top of each other. Visitors drag the handle, or click anywhere on the image, to reveal more of one or the other. It works well for renovations, cleaning and landscaping jobs, salons and med spas, dentists, photo retouching and product results.

Features

• A “Before After Slider” block for the block editor, with a live preview.
• A [beforely] shortcode for the classic editor, widgets and page builders.
• Left and right, or top and bottom.
• Choose where the handle starts.
• Visitors drag or click to move the handle, or the handle follows the mouse.
• Editable “Before” and “After” labels, shown always, on hover or never.
• Handle color and rounded corners.
• An optional hint animation that plays once when the slider scrolls into view. It is skipped for visitors who ask their device for reduced motion.
• Keyboard support: the handle is a focusable slider. Arrow keys, Page Up, Page Down, Home and End move it, and screen readers announce its position.
• Works on phones. Swiping sideways moves the handle and swiping up or down still scrolls the page.
• Uses your media library images with responsive sizes and lazy loading.
• Small and fast. No jQuery and no other libraries. The script and styles load only on pages that show a slider.
• Nothing is sent anywhere. The plugin makes no external requests, sets no cookies and stores nothing outside your posts.

Shortcode

[beforely before="12" after="34"]

before and `after` take a media library ID or an image URL. Optional attributes:

• before_label, after_label: label text. Defaults to “Before” and “After”.
• labels: always, hover or none.
• orientation: horizontal or vertical.
• start: where the handle starts, from 0 to 100. Default 50.
• move_on: drag or hover.
• color: handle color as a hex code, for example #ffffff.
• animate: yes to play the hint animation.
• radius: corner radius in pixels.
• before_alt, after_alt: alternative text when you use image URLs.
• caption: a caption shown under the slider.
• class: extra CSS classes.

Beforely Pro

Need more? Beforely Pro is a separate paid plugin that adds video comparisons, one-photo effects (black and white, sepia, blur), a filterable gallery block, click, scroll and auto-sweep modes, and more handle and label styles. This free plugin has no limits and shows no upgrade prompts.