Title: 2FOX4 Before After
Author: 2fox4oliver
Published: <strong>ئازار 30, 2026</strong>
Last modified: ئازار 30, 2026

---

گەڕان لە پێوەکراوەکان

![](https://s.w.org/plugins/geopattern-icon/2fox4-before-after.svg)

# 2FOX4 Before After

 لەلایەن [2fox4oliver](https://profiles.wordpress.org/2fox4oliver/)

[داگرتن](https://downloads.wordpress.org/plugin/2fox4-before-after.1.1.3.zip)

 * [وردەکارییەکان](https://ku.wordpress.org/plugins/2fox4-before-after/#description)
 * [پێداچوونەوەکان](https://ku.wordpress.org/plugins/2fox4-before-after/#reviews)
 *  [دامەزراندن](https://ku.wordpress.org/plugins/2fox4-before-after/#installation)
 * [گەشەپێدان](https://ku.wordpress.org/plugins/2fox4-before-after/#developers)

 [پشتیوانی](https://wordpress.org/support/plugin/2fox4-before-after/)

## وەسف

Von Oliver Deppe von [2FOX4](https://www.2fox4.de/wordpress-plugins/).

**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](https://www.paypal.com/de/webapps/mpp/ua/useragreement-full)
 * [PayPal Privacy Policy](https://www.paypal.com/de/webapps/mpp/ua/privacy-full)

## بڵۆکەکان

ئەم پێوەکراوە 1 بڵۆک دابین دەکات.

 *   2FOX4 Before After

## دامەزراندن

 1. Upload the plugin folder to the `/wp-content/plugins/` directory, or install the
    plugin through the WordPress plugins screen directly.
 2. Activate the plugin through the ‘Plugins’ screen in WordPress.
 3. Use the Gutenberg block “2FOX4 Before After”, the Elementor widget, or the `[bfas_before_after_slider]`
    shortcode to add image comparisons to your pages.

## پهد

### Does this plugin work with Elementor?

Yes! The plugin includes a native Elementor widget. After activation, you will find
the “2FOX4 Before After” widget in the Elementor panel under the General category.

### Does it work on mobile devices?

Yes, the slider has full touch support and works smoothly on all mobile devices 
and tablets.

### Can I use multiple sliders on one page?

Yes, you can add as many sliders as you need. Each one works independently.

### What image sizes should I use?

Both images should have the same dimensions for the best visual result. The slider
will work with different sizes, but the comparison is most effective with matching
images.

## پێداچوونەوەکان

هیچ پێداچوونەوەیەک نەنووسراوە بۆ ئەم پێوەکراوە.

## بەشداربووان و گەشەپێدەران

“2FOX4 Before After” نەرمەواڵەیەکی سەرچاوە کراوەیە. ئەم کەسانەی خوارەوە بەشدارییان
تێدا کردووە.

بەشداربووان

 *   [ 2fox4oliver ](https://profiles.wordpress.org/2fox4oliver/)

[“2FOX4 Before After” وەربگێڕە بۆ زمانەکەی خۆت.](https://translate.wordpress.org/projects/wp-plugins/2fox4-before-after)

### دەتەوێت بەشداربیت لە گەشەپێدان؟

[گەڕان لە کۆدەکەدا بکە](https://plugins.trac.wordpress.org/browser/2fox4-before-after/)،
سەیری [تەمارگەی (SVN)](https://plugins.svn.wordpress.org/2fox4-before-after/) بکە،
یان بەشداربە لە [ڕووداوتۆماری گەشەپێدان](https://plugins.trac.wordpress.org/log/2fox4-before-after/)
لە ڕێگەی [(RSS)](https://plugins.trac.wordpress.org/log/2fox4-before-after/?limit=100&mode=stop_on_copy&format=rss).

## ڕووداوتۆمارگەریی گۆڕین

#### 1.1.3

 * Fix: Corrected Plugin URI to point to a valid, publicly accessible URL.
 * Fix: Replaced all phpcs:ignore escape comments with proper wp_kses() escaping
   for full WordPress.org compliance.
 * Fix: Renamed shortcode from `before_after_slider` to `bfas_before_after_slider`
   to use a unique, prefixed name.

#### 1.1.2

 * Change: Renamed plugin from “Before After Slider” to “2FOX4 Before After” for
   WordPress.org uniqueness.
 * Change: Updated slug and text domain to 2fox4-before-after.

#### 1.1.1

 * Fix: Properly escape translated output in donation notice (EscapeOutput compliance).
 * Fix: Removed deprecated load_plugin_textdomain() call (unnecessary since WordPress
   4.6).
 * Fix: Updated “Tested up to” to WordPress 6.9.
 * Fix: Prefixed data-nonce attribute to data-bfas-nonce for full prefix compliance.

#### 1.1.0

 * New: Added “Reveal” mode — both images stay fixed while the slider reveals one
   over the other.
 * New: Mode selector available in Gutenberg Block, Elementor Widget, and Shortcode(
   mode=”reveal”).

#### 1.0.0

 * Initial release.

## مێتا

 *  وەشان **1.1.3**
 *  دوایین بەڕۆژکردنەوە **2 مانگ لەمەوبەر**
 *  دامەزراندنی چالاک **کەمتر لە 10**
 *  وەشانی وۆردپرێس ** 6.4 یان بەرزتر **
 *  تاقیکراوەتەوە تا **6.9.4**
 *  وەشانی PHP ** 8.0 یان بەرزتر **
 *  زمان
 * [English (US)](https://wordpress.org/plugins/2fox4-before-after/)
 * تاگەکان
 * [before after](https://ku.wordpress.org/plugins/tags/before-after/)[compare](https://ku.wordpress.org/plugins/tags/compare/)
   [image comparison](https://ku.wordpress.org/plugins/tags/image-comparison/)[image slider](https://ku.wordpress.org/plugins/tags/image-slider/)
   [slider](https://ku.wordpress.org/plugins/tags/slider/)
 *  [بینینی پێشکەوتوو](https://ku.wordpress.org/plugins/2fox4-before-after/advanced/)

## هەڵسەنگاندنەکان

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/2fox4-before-after/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/2fox4-before-after/reviews/)

## بەشداربووان

 *   [ 2fox4oliver ](https://profiles.wordpress.org/2fox4oliver/)

## پشتیوانی

هیچت هەیە بۆ وتن؟ پێویستت بە یارمەتییە؟

 [بینینی مەکۆی پاڵپشتی](https://wordpress.org/support/plugin/2fox4-before-after/)

## ببەخشە

دەتەوێت پشتگیریی بەرەوپێشچوونی ئەم پێوەکراوە بکەیت؟

 [ ببەخشە بەم پێوەکراوە ](https://www.paypal.com/paypalme/oliverdeppe/5)