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.

Binsaifullah

Beaf is a custom Gutenberg Block based plugin that is developed with Gutenberg Native Components. You can easily showcase the Photo Comparison. It comes with different styles and settings so that you can easily customize it as per your needs. It is a lite version of Beaf Pro. To get more features and options, you can check the <a href="https://beaf.gutenbergkits.com" rel="nofollow ugc">Beaf Pro</a>.
<h3>Overview</h3>
<ul>
<li><a href="https://beaf.gutenbergkits.com/demos" rel="nofollow ugc">See Demos</a></li>
<li><a href="https://beaf.gutenbergkits.com" rel="nofollow ugc">Get Beaf Pro</a></li>
</ul>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/OylHrkczwK4?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<h3>Key Features</h3>
<ul>
<li>Simple, light-weight, and super-fast</li>
<li>Built with only Gutenberg Native Components</li>
<li>No Block Builder at all</li>
<li>100% Responsive</li>
<li>Horizontal & Vertical View</li>
<li>Images Comparison Options
<ul>
<li>Before & After Label</li>
<li>Comparison start on Hover</li>
<li>Horizontal & Vertical Comparison</li>
</ul>
</li>
<li>Easy to Use in Gutenberg Editor</li>
<li>Drag & Drop Use</li>
<li>No jQuery dependency</li>
</ul>
<h4>Beaf Pro features</h4>
<ul>
<li>3 Content Types (Image, Video, Iframe – Google Map)</li>
<li>Custom Label Styles</li>
<li>Custom Label Position</li>
<li>Custom Label Typography</li>
<li>Labels Animation Options</li>
<li>Custom Comparison Starting Point </li>
<li>Custom Comparison Line</li>
<li>Custom Comparison Line Color</li>
<li>Custom Comparison Line Thickness</li>
<li>Custom Caption for beaf slider</li>
</ul>
Beaf Pro is a premium version of Beaf. You can get more features and options in Beaf Pro. <a href="https://beaf.gutenbergkits.com" rel="nofollow ugc">Get Beaf Pro</a>

Beaf – Photo Comparison Block

Beaf is a Gutenberg Block developed with Gutenberg Native Components to showcase photo Comparison with different styles.

2FOX4 Before After vs Beaf – Photo Comparison Block