Amitry Before After Slider - Image Comparison Block -- WordPress 插件

Before After Slider Image Comparison Block - Amitry

开发者	amitry
更新时间	2026年6月21日 21:02
PHP版本:	7.4 及以上
WordPress版本:	7.0
版权:	GPLv2 or later
版权网址:	版权信息

下载

1.0.0 1.1.0

详情介绍:

Before After Slider adds a before and after image comparison slider to the WordPress block editor. Place two images, drag the divider, and reveal the difference between them. Use it as a native block, build reusable sliders in the admin and embed them with a shortcode, or add it with the Elementor widget. Live demo: https://demo2.amitry.de Discover more with Pro: https://amitry.de/amitry-before-after-slider/ Need more than one pair of images? Add further comparisons to the same block and they line up side by side, sharing a single design and aspect ratio. Block editor, shortcode and Elementor Add the slider the way that fits your site. It works as a native block in the WordPress block editor (Gutenberg), as a shortcode created from reusable sliders in the admin (Before/After Sliders), and as a dedicated Elementor widget. All three produce the same slider. Where a before and after image slider helps A before and after slider is a clear way to show change. Common uses include photo retouching and color grading, design mockups, renovation and repair work, fitness and beauty results, maps and satellite imagery, product customisation, and any other visual comparison. This image comparison block turns that reveal into an interactive, responsive and accessible slider. Features

Native block with a live, draggable preview in the editor.
One block holds a single before and after comparison, or several side by side.
Horizontal wipe or vertical reveal for the comparison slider.
Optional hover mode so the slider follows the cursor instead of dragging.
Design presets (Minimal, Classic, Bold, Soft, Dark) applied with one click.
Controls for line width, handle size, corner radius, colors and labels.
Width and alignment (left, centered, right) for a single comparison.
Fixed aspect ratios so every comparison keeps the same shape.
Keyboard accessible handle (arrow keys, Home, End) with ARIA slider semantics.
Lightweight front end: vanilla JavaScript, lazy-loaded images, no external services and no tracking.
Works with block themes and classic themes.
Three ways to add it: the Gutenberg block editor, a shortcode for reusable sliders, and an Elementor widget.

For developers

bacmpr_settings_schema filter to adjust the default design values.
bacmpr_loaded action that fires after the plugin initialises.

安装:

Upload the plugin folder to the /wp-content/plugins/ directory, or install it through the Plugins screen in WordPress.
Activate the plugin through the Plugins screen.
Add the Before After Compare block to any post or page and select your before and after image.

屏幕截图:

升级注意事项:

1.1.0 Adds a slider manager with per-slider shortcodes and an Elementor widget. 1.0.0 Initial release.

常见问题:

Do I need a page builder?

No. The before and after slider works in the standard WordPress block editor.

How do I show several comparison sliders side by side?

Select the block and use the plus button in the toolbar, or the Add comparison button in the block settings. Each comparison you add lines up next to the others and shares the same design and aspect ratio. On phones they stack so each stays readable.

Can I make a single slider smaller or align it?

Yes. With a single comparison, the Layout panel offers a width control, a left, centered or right alignment, and a fixed aspect ratio.

Can the slider move on hover instead of dragging?

Yes. Enable the Move on hover option in the block settings. Touch devices keep the drag behaviour.

Is the before and after slider accessible?

Yes. The handle is a real slider control with ARIA semantics, a visible focus state, and keyboard support using the arrow keys, Home and End.

Does the plugin load any external resources?

No. All assets are served from your own site and the plugin does not contact external services or track anything.

Is there a live demo?

Yes. You can try every option at https://demo2.amitry.de and find out more at https://amitry.de/amitry-before-after-slider/

Can I use it with Elementor?

Yes. The plugin adds a native Elementor widget called Before After Slider. Open the Elementor editor, search for "Before After", drag the widget in, choose a before and after image, and adjust orientation, labels, preset and colors in the panel.

How do I create a slider and show it with a shortcode?

Open Before/After Sliders in the WordPress admin menu and add a new slider. Choose a before and after image, set the options, and publish. Each slider has its own shortcode, for example [bacmpr_slider id="123"], which you can copy from the editor and paste into any post, page or widget. These managed sliders are separate from the block and the Elementor widget.

更新日志:

1.1.0

Added a slider manager in the admin (Before/After Sliders) with a per-slider shortcode, for example [bacmpr_slider id="123"].
Added a native Elementor widget (Before After Slider).

1.0.0

Initial release.