2fox4oliver

Von Oliver Deppe von <a href="https://www.2fox4.de/wordpress-plugins/" rel="nofollow ugc">2FOX4</a>.
2FOX4 Before After lets you create beautiful, interactive image comparisons with a draggable slider. Perfect for showcasing transformations, renovations, photo edits, and any kind of visual before/after comparison.
<h4>Features</h4>
<ul>
<li>Three ways to use: Gutenberg Block, Shortcode, and Elementor Widget</li>
<li>Two comparison modes: “Slider” (images move with the divider) or “Reveal” (both images stay fixed, divider reveals one over the other)</li>
<li>Horizontal & Vertical mode: Choose the slider orientation that fits your layout</li>
<li>Adjustable start position: Set where the divider appears on load (0–100%)</li>
<li>Custom labels: Add “Before” and “After” text overlays (or any custom text)</li>
<li>Divider color: Pick any color for the divider line and handle</li>
<li>Hover mode: Slider follows the mouse cursor instead of requiring a drag</li>
<li>Touch support: Works perfectly on mobile devices with touch gestures</li>
<li>Loading animation: Smooth entrance animation when the slider appears</li>
<li>Custom CSS class: Add your own class for additional styling</li>
<li>Keyboard accessible: Navigate the slider with arrow keys</li>
<li>Lightweight: No jQuery dependency on the frontend, pure vanilla JavaScript</li>
</ul>
<h4>Shortcode Usage</h4>
<pre><code>[bfas_before_after_slider before="URL" after="URL"]
</code></pre>
Full example with all options:
<pre><code>[bfas_before_after_slider before="https://example.com/before.jpg" after="https://example.com/after.jpg" start="30" mode="reveal" orientation="horizontal" label_before="Before" label_after="After" divider_color="#ffffff" hover="0" animate="1" css_class="my-class"]
</code></pre>
<h4>Shortcode Parameters</h4>
<ul>
<li>before (required) — URL of the before image</li>
<li>after (required) — URL of the after image</li>
<li>start — Start position in percent (default: 50)</li>
<li>mode — “slider” or “reveal” (default: slider). In reveal mode, both images stay fixed and the divider reveals one over the other.</li>
<li>orientation — “horizontal” or “vertical” (default: horizontal)</li>
<li>label_before — Text label for the before side</li>
<li>label_after — Text label for the after side</li>
<li>divider_color — Hex color for the divider (default: #ffffff)</li>
<li>hover — Set to “1” to enable hover mode (default: 0)</li>
<li>animate — Set to “1” for entrance animation (default: 0)</li>
<li>css_class — Custom CSS class for the container</li>
</ul>
<h3>External services</h3>
This plugin includes a voluntary donation link that points to PayPal (paypal.com). The link is displayed inside an admin notice (“Buy me a coffee”) and does not transmit any data automatically. No connection to PayPal is made unless the site administrator clicks the link themselves.
<ul>
<li>Service provider: PayPal (Europe) S.à r.l. et Cie, S.C.A.</li>
<li><a href="https://www.paypal.com/de/webapps/mpp/ua/useragreement-full" rel="nofollow ugc">PayPal Terms of Service</a></li>
<li><a href="https://www.paypal.com/de/webapps/mpp/ua/privacy-full" rel="nofollow ugc">PayPal Privacy Policy</a></li>
</ul>

2FOX4 Before After

Compare two images with an interactive before/after slider. Supports Gutenberg, Shortcode and Elementor.

Marcel CL

Simple Before After Image Slider is a minimalistic and lightweight plugin that allows you to display before/after image comparisons anywhere on your WordPress site. Perfect for photographers showcasing photo edits, designers comparing visuals, and marketers highlighting transformations.
🚀 Key Features: 
– Responsive and fast-loading before/after slider. 
– Works with Gutenberg, Elementor, and Classic Editor. 
– SEO-friendly and lightweight. 
– No dependencies – clean, optimized code.
<h3>💡 How to Use</h3>
Simply insert the following shortcode into any post, page, or widget: [before_after_slider before=”URL_BEFORE” after=”URL_AFTER”] 
For multiple comparisons, add separate shortcodes: [before_after_slider before=”URL1″ after=”URL2″] [before_after_slider before=”URL3″ after=”URL4″]
🌟 Powered By: 
This plugin is developed by <a href="https://thepresetsroom.com" rel="nofollow ugc">ThePresetsRoom</a> – a hub for professional photo editing.
<h3>Dependencies</h3>
This plugin uses the open source library <code>img-comparison-slider</code>.
<ul>
<li>GitHub repository: https://github.com/sneas/img-comparison-slider</li>
<li>Source file used: https://github.com/sneas/img-comparison-slider/blob/master/packages/img-comparison-slider/src/index.ts</li>
<li>License: MIT</li>
</ul>
The compiled version of the component is used in this plugin. All credit to the original authors.

Simple Before After Image Slider

Easily display before/after image comparisons with a lightweight and responsive slider. Perfect for photographers, creatives, and visual marketers.

2FOX4 Before After vs Simple Before After Image Slider