Title: Beforely – Before After Image Slider Author: App Holdings Published: October 15, 2026 Last modified: October 15, 2026 --- Search plugins ![](https://ps.w.org/beforely-before-after-image-slider/assets/banner-772x250.png? rev=3748936) ![](https://ps.w.org/beforely-before-after-image-slider/assets/icon-256x256.png? rev=3748936) # Beforely – Before After Image Slider By [App Holdings](https://profiles.wordpress.org/appholdings/) [Download](https://downloads.wordpress.org/plugin/beforely-before-after-image-slider.1.0.0.zip) * [Details](https://wordpress.org/plugins/beforely-before-after-image-slider/#description) * [Reviews](https://wordpress.org/plugins/beforely-before-after-image-slider/#reviews) * [Installation](https://wordpress.org/plugins/beforely-before-after-image-slider/#installation) * [Development](https://wordpress.org/plugins/beforely-before-after-image-slider/#developers) [Support](https://wordpress.org/support/plugin/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](https://beforely.appholdings.org/wordpress/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. ## Screenshots [⌊A before and after slider on a page.⌉⌊A before and after slider on a page.⌉[ A before and after slider on a page. [⌊The block and its settings in the block editor.⌉⌊The block and its settings in the block editor.⌉[ The block and its settings in the block editor. [⌊Top and bottom direction with labels.⌉⌊Top and bottom direction with labels.⌉[ Top and bottom direction with labels. ## Blocks This plugin provides 1 block. * Before After Slider Compare two images with a handle that visitors drag across. ## Installation 1. In your dashboard go to Plugins > Add New, search for “Beforely” and click Install, then Activate. 2. Edit a page or post, click the + button and add the “Before After Slider” block. 3. Choose the before photo and the after photo. Adjust labels, direction and style in the block settings sidebar. For the classic editor or a page builder, add the `[beforely]` shortcode with the media library IDs of your two images. ## FAQ ### Do the two photos need to be the same size? The slider takes its size from the before photo, and the after photo is scaled to cover the same area. Photos taken from the same spot with the same framing and aspect ratio line up best. ### Can I use it with Elementor, Divi or another page builder? Yes. Add the `[beforely]` shortcode in the builder’s shortcode or text widget. ### How do I find a media library ID? Open Media > Library, click the image, and look at the address bar. The number after` item=` is the ID. You can also use the image URL instead. ### Can I put several sliders on one page? Yes, as many as you like. ### Does it work without JavaScript? The slider shows both photos at the starting position without JavaScript. Moving the handle needs JavaScript. ### Does it collect any data? No. It makes no external requests, sets no cookies and does not track visitors. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Beforely – Before After Image Slider” is open source software. The following people have contributed to this plugin. Contributors * [ App Holdings ](https://profiles.wordpress.org/appholdings/) [Translate “Beforely – Before After Image Slider” into your language.](https://translate.wordpress.org/projects/wp-plugins/beforely-before-after-image-slider) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/beforely-before-after-image-slider/), check out the [SVN repository](https://plugins.svn.wordpress.org/beforely-before-after-image-slider/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/beforely-before-after-image-slider/) by [RSS](https://plugins.trac.wordpress.org/log/beforely-before-after-image-slider/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0.0 * First release. ## Meta * Version **1.0.0** * Last updated **3 days ago** * Active installations **Fewer than 10** * WordPress version ** 6.3 or higher ** * Tested up to **7.1.3** * PHP version ** 7.4 or higher ** * Tags * [before after](https://wordpress.org/plugins/tags/before-after/)[block](https://wordpress.org/plugins/tags/block/) [compare images](https://wordpress.org/plugins/tags/compare-images/)[image comparison](https://wordpress.org/plugins/tags/image-comparison/) [slider](https://wordpress.org/plugins/tags/slider/) * [Advanced View](https://wordpress.org/plugins/beforely-before-after-image-slider/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/beforely-before-after-image-slider/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/beforely-before-after-image-slider/reviews/) ## Contributors * [ App Holdings ](https://profiles.wordpress.org/appholdings/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/beforely-before-after-image-slider/)