2fox4oliver

<p>Von Oliver Deppe von <a href="https://www.2fox4.de/wordpress-plugins/" rel="nofollow ugc">2FOX4</a>.</p>
<p><strong>2FOX4 Before After</strong> 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.</p>
<h4>Features</h4>
<ul>
<li><strong>Three ways to use:</strong> Gutenberg Block, Shortcode, and Elementor Widget</li>
<li><strong>Two comparison modes:</strong> “Slider” (images move with the divider) or “Reveal” (both images stay fixed, divider reveals one over the other)</li>
<li><strong>Horizontal & Vertical mode:</strong> Choose the slider orientation that fits your layout</li>
<li><strong>Adjustable start position:</strong> Set where the divider appears on load (0–100%)</li>
<li><strong>Custom labels:</strong> Add “Before” and “After” text overlays (or any custom text)</li>
<li><strong>Divider color:</strong> Pick any color for the divider line and handle</li>
<li><strong>Hover mode:</strong> Slider follows the mouse cursor instead of requiring a drag</li>
<li><strong>Touch support:</strong> Works perfectly on mobile devices with touch gestures</li>
<li><strong>Loading animation:</strong> Smooth entrance animation when the slider appears</li>
<li><strong>Custom CSS class:</strong> Add your own class for additional styling</li>
<li><strong>Keyboard accessible:</strong> Navigate the slider with arrow keys</li>
<li><strong>Lightweight:</strong> 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>
<p>Full example with all options:</p>
<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><strong>before</strong> (required) — URL of the before image</li>
<li><strong>after</strong> (required) — URL of the after image</li>
<li><strong>start</strong> — Start position in percent (default: 50)</li>
<li><strong>mode</strong> — “slider” or “reveal” (default: slider). In reveal mode, both images stay fixed and the divider reveals one over the other.</li>
<li><strong>orientation</strong> — “horizontal” or “vertical” (default: horizontal)</li>
<li><strong>label_before</strong> — Text label for the before side</li>
<li><strong>label_after</strong> — Text label for the after side</li>
<li><strong>divider_color</strong> — Hex color for the divider (default: #ffffff)</li>
<li><strong>hover</strong> — Set to “1” to enable hover mode (default: 0)</li>
<li><strong>animate</strong> — Set to “1” for entrance animation (default: 0)</li>
<li><strong>css_class</strong> — Custom CSS class for the container</li>
</ul>
<h3>External services</h3>
<p>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.</p>
<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.

Tim Normington

<p>Sleek Compare is a lightweight before/after image comparison slider for WordPress. Built with performance in mind — no jQuery, no FontAwesome, no bloat.</p>
<h4>Key Features</h4>
<ul>
<li><strong>Ultra-lightweight</strong>: Under 10KB total (JS + CSS combined)</li>
<li><strong>Zero external dependencies</strong>: No jQuery or icon libraries required</li>
<li><strong>Touch-friendly</strong>: Full swipe support for mobile devices</li>
<li><strong>Keyboard accessible</strong>: Arrow keys, Shift+Arrow for 10% jumps, Home/End</li>
<li><strong>Simple shortcode</strong>: Works in classic editor, widgets, and page builders</li>
<li><strong>Lazy loading</strong>: Images and slider initialization deferred until visible</li>
<li><strong>CSS variables</strong>: Easy theming without touching code</li>
<li><strong>No render-blocking resources</strong>: Scripts and styles load conditionally</li>
</ul>
<h4>Pro Version</h4>
<p>Want Gutenberg block and Elementor widget support? Check out <a href="https://products.tnormington.com/sleek-compare" rel="nofollow ugc">Sleek Compare Pro</a> for:</p>
<ul>
<li>Native Gutenberg block with live preview</li>
<li>Full Elementor widget with style controls</li>
<li>Custom handle colors</li>
<li>Priority email support</li>
<li>Lifetime updates</li>
</ul>
<h3>Usage</h3>
<h4>Shortcode</h4>
<p>Basic usage:<br />
    [sleek_compare before=”https://example.com/before.jpg” after=”https://example.com/after.jpg”]</p>
<p>With all options:<br />
    [sleek_compare<br />
      before=”https://example.com/before.jpg”<br />
      after=”https://example.com/after.jpg”<br />
      start=”30″<br />
      label_before=”Original”<br />
      label_after=”Enhanced”<br />
      show_labels=”true”<br />
    ]</p>
<h4>Shortcode Attributes</h4>
<ul>
<li><code>before</code> – URL of the before image (required)</li>
<li><code>after</code> – URL of the after image (required)</li>
<li><code>start</code> – Starting position 0-100 (default: 50)</li>
<li><code>label_before</code> – Before label text (default: “Before”)</li>
<li><code>label_after</code> – After label text (default: “After”)</li>
<li><code>show_labels</code> – Show labels true/false (default: true)</li>
</ul>


Sleek Compare

A lightweight before and after image comparison slider for WordPress. No dependencies, under 10KB total.

2FOX4 Before After vs Sleek Compare