2FOX4 Before After

Von Oliver Deppe von 2FOX4.

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.

Features

• Three ways to use: Gutenberg Block, Shortcode, and Elementor Widget
• Two comparison modes: “Slider” (images move with the divider) or “Reveal” (both images stay fixed, divider reveals one over the other)
• Horizontal & Vertical mode: Choose the slider orientation that fits your layout
• Adjustable start position: Set where the divider appears on load (0–100%)
• Custom labels: Add “Before” and “After” text overlays (or any custom text)
• Divider color: Pick any color for the divider line and handle
• Hover mode: Slider follows the mouse cursor instead of requiring a drag
• Touch support: Works perfectly on mobile devices with touch gestures
• Loading animation: Smooth entrance animation when the slider appears
• Custom CSS class: Add your own class for additional styling
• Keyboard accessible: Navigate the slider with arrow keys
• Lightweight: No jQuery dependency on the frontend, pure vanilla JavaScript

Shortcode Usage

[bfas_before_after_slider before="URL" after="URL"]

Full example with all options:

[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"]

Shortcode Parameters

• before (required) — URL of the before image
• after (required) — URL of the after image
• start — Start position in percent (default: 50)
• mode — “slider” or “reveal” (default: slider). In reveal mode, both images stay fixed and the divider reveals one over the other.
• orientation — “horizontal” or “vertical” (default: horizontal)
• label_before — Text label for the before side
• label_after — Text label for the after side
• divider_color — Hex color for the divider (default: #ffffff)
• hover — Set to “1” to enable hover mode (default: 0)
• animate — Set to “1” for entrance animation (default: 0)
• css_class — Custom CSS class for the container

External services

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.

• Service provider: PayPal (Europe) S.à r.l. et Cie, S.C.A.
• PayPal Terms of Service
• PayPal Privacy Policy