🎉 Use coupon MYXERO to enjoy 20% recurring discount on any plan. View Pricing
XeroWP
2

2FOX4 Before After

0/5 (0 ratings) — active installs Updated Mar 30, 2026
before aftercompareimage comparisonimage sliderslider
Download v1.1.3 Plugin Website

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.