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
