外掛標籤
開發者團隊
原文外掛簡介
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
