2fox4oliver

Von Oliver Deppe von <a href="https://www.2fox4.de/wordpress-plugins/" rel="nofollow ugc">2FOX4</a>.
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.
<h4>Features</h4>
<ul>
<li>Three ways to use: Gutenberg Block, Shortcode, and Elementor Widget</li>
<li>Two comparison modes: “Slider” (images move with the divider) or “Reveal” (both images stay fixed, divider reveals one over the other)</li>
<li>Horizontal & Vertical mode: Choose the slider orientation that fits your layout</li>
<li>Adjustable start position: Set where the divider appears on load (0–100%)</li>
<li>Custom labels: Add “Before” and “After” text overlays (or any custom text)</li>
<li>Divider color: Pick any color for the divider line and handle</li>
<li>Hover mode: Slider follows the mouse cursor instead of requiring a drag</li>
<li>Touch support: Works perfectly on mobile devices with touch gestures</li>
<li>Loading animation: Smooth entrance animation when the slider appears</li>
<li>Custom CSS class: Add your own class for additional styling</li>
<li>Keyboard accessible: Navigate the slider with arrow keys</li>
<li>Lightweight: No jQuery dependency on the frontend, pure vanilla JavaScript</li>
</ul>
<h4>Shortcode Usage</h4>
<pre><code>[bfas_before_after_slider before="URL" after="URL"]
</code></pre>
Full example with all options:
<pre><code>[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"]
</code></pre>
<h4>Shortcode Parameters</h4>
<ul>
<li>before (required) — URL of the before image</li>
<li>after (required) — URL of the after image</li>
<li>start — Start position in percent (default: 50)</li>
<li>mode — “slider” or “reveal” (default: slider). In reveal mode, both images stay fixed and the divider reveals one over the other.</li>
<li>orientation — “horizontal” or “vertical” (default: horizontal)</li>
<li>label_before — Text label for the before side</li>
<li>label_after — Text label for the after side</li>
<li>divider_color — Hex color for the divider (default: #ffffff)</li>
<li>hover — Set to “1” to enable hover mode (default: 0)</li>
<li>animate — Set to “1” for entrance animation (default: 0)</li>
<li>css_class — Custom CSS class for the container</li>
</ul>
<h3>External services</h3>
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.
<ul>
<li>Service provider: PayPal (Europe) S.à r.l. et Cie, S.C.A.</li>
<li><a href="https://www.paypal.com/de/webapps/mpp/ua/useragreement-full" rel="nofollow ugc">PayPal Terms of Service</a></li>
<li><a href="https://www.paypal.com/de/webapps/mpp/ua/privacy-full" rel="nofollow ugc">PayPal Privacy Policy</a></li>
</ul>

2FOX4 Before After

Compare two images with an interactive before/after slider. Supports Gutenberg, Shortcode and Elementor.

Code Canel

Turn Ordinary Images Into Compelling Visual Stories – Instantly.
WP Before After Image Slider (also known as BefTer) is the most flexible and performance-optimized before-after comparison slider plugin for WordPress. Whether you’re a photographer showcasing edits, a designer presenting a redesign, a healthcare professional displaying treatment results, or a real estate agent revealing a renovation – BefTer helps you show real impact with zero effort.
Drag. Slide. Convert.
👉 Live Preview: <a href="https://codecanel.com/wp-before-after-image-slider/?utm_source=repo_upgrade&utm_medium=repo&utm_campaign=repo_productpage&utm_id=repo_productpage#features" rel="nofollow ugc">BefTer Live Preview</a> 
👉 Pro Version: <a href="https://codecanel.com/wp-before-after-image-slider/?utm_source=repo_upgrade&utm_medium=repo&utm_campaign=repo_productpage&utm_id=repo_productpage#features" rel="nofollow ugc">Explore Pro Features</a> 
👉 Documentation: <a href="https://codecanel.com/docs/wp-before-after-image-slider/" rel="nofollow ugc">Installation & Setup Guide</a> 
👉 Video Guide: <a href="https://www.youtube.com/watch?v=zkCY5GbscWQ" rel="nofollow ugc">Step-by-Step Instructions</a> 
👉 Support: <a href="https://codecanel.com/contact/" rel="nofollow ugc">Get Help</a> 
👉 Community: <a href="https://www.facebook.com/groups/codecanel" rel="nofollow ugc">Join Our Facebook Page</a>
<h3>Why Use a Before After Image Comparison Slider?</h3>
When words fail to capture your results, visuals deliver the proof.
An interactive before-after slider shows your audience exactly what you’ve achieved – whether it’s a photo retouch, a home renovation, a body transformation, or a product upgrade. It builds instant trust, boosts user engagement, and turns passive visitors into confident customers.
With BefTer, you get:
✅ Interactive, touch-friendly sliders that invite users to explore 
✅ Visual storytelling that builds credibility and trust faster than any text 
✅ Zero coding required – install, upload images, and publish in minutes 
✅ Works with all major page builders – Elementor, Gutenberg, Divi, WPBakery, Bricks, Beaver Builder 
✅ Lightweight and performance-optimized – no impact on site speed
<h3>🆓 Free Features</h3>
The free version of BefTer is packed with everything most websites need to create beautiful, professional image comparison sliders:
✅ Two-Image Comparison Slider – Side-by-side before and after comparisons 
✅ Horizontal & Vertical Slider Layouts – Match your site’s design flow 
✅ Customizable Before/After Text Labels – Personalize slider labels freely 
✅ Label Visibility Control – Show or hide labels as needed 
✅ Overlay Toggle Option – Add an overlay for a polished effect 
✅ Interactive Mouse Hover Effects – Engage desktop users effortlessly 
✅ Slide Trigger Control – Choose drag or hover interaction 
✅ Slide Orientation Control – Horizontal or vertical sliding 
✅ Adjustable Image Sizes – Fit sliders into any layout 
✅ Lazy Loading – Improve page speed with on-demand image loading 
✅ Built-in Shortcode Generator – Embed sliders anywhere in seconds 
✅ Widget Support – Add sliders via WordPress widgets 
✅ Image Alt-Tag Support – SEO-friendly image descriptions 
✅ SEO-Friendly Structure – Built for search engine visibility 
✅ Speed-Optimized Performance – Lightweight with no bloat 
✅ Elementor Widget – Native drag-and-drop integration
<h3>🚀 Pro Features</h3>
Unlock the full power of BefTer with the Pro version – designed for creators, agencies, and businesses who demand more control and advanced visual experiences:
✅ Three-Image Comparison Slider – Add a third image for multi-step comparisons 
✅ Labels for Three-Image Slider – Full labeling control across all three images 
✅ Video Comparison Slider – Compare before-after videos with the same slider experience 
✅ YouTube Video Support – Embed YouTube videos with custom duration settings 
✅ Self-Hosted Video Support – Use your own videos with custom duration control 
✅ Video Controller with Loop & Autoplay – Full video playback control 
✅ Auto Slide (Animated Comparison) – Hands-free animated reveal – no interaction needed 
✅ 8 Pre-Built Slider Templates – Professional, ready-to-use preview styles 
✅ Image Comparison Carousel – Display multiple sliders in a carousel layout 
✅ Popup / Full-Screen View – Immersive distraction-free full-screen slider mode 
✅ Live Slider Preview – See your slider in real time before publishing 
✅ Customizable Line Shape – Style the divider line to match your brand 
✅ Line Color Customization – Full color control for the divider 
✅ Customizable Labels – Advanced styling for label fonts, sizes, and colors 
✅ Customizable Handle – Style the slider handle to fit your design 
✅ Customizable Divider – Full control over divider style and appearance 
✅ Customizable Overlay – Advanced overlay styling options 
✅ Customizable Before/After Background Colors – Brand-matched color schemes 
✅ Adjustable Default Slider Offset – Set where the slider starts on load 
✅ Default Offset Position – Precise control over slider starting position 
✅ Hide Slide Handler – Clean minimal look with no visible handle 
✅ Slider Direction Control – Set sliding direction to horizontal or vertical 
✅ Slider Captions – Add informative text captions to each side of your slider 
✅ Slider Badge – Highlight featured comparisons with a custom badge 
✅ Indicator Image – Add icons or pointers to guide viewer attention 
✅ Priority Email Support – Fast, dedicated support from our team 
✅ Product Updates for 1 Year – Stay current with the latest features 
✅ Lowest Price Guaranteed – Best value in the market
<h3>✨ Standout Features at a Glance</h3>
👉 Two-Image & Three-Image Comparison Sliders 
Highlight transformations side-by-side, or go even further with three-way comparisons for maximum visual impact.
👉 Video Comparison Slider 
Go beyond static images. Compare before-after videos with the same intuitive drag-slide experience.
👉 Auto Slide (Animated Comparison) 
Automatically animate your slider from start to end – a hands-free visual reveal that captures attention the moment it scrolls into view.
👉 One-Image Retouch Slider (Pro) 
Create a before-after effect using just a single image. Apply filters like black & white or blur to generate the “before” state – perfect for photo retouching and color correction showcases.
👉 Image Comparison Carousel (Pro) 
Display multiple before-after sliders in a sleek carousel. Ideal for portfolios, product showcases, and transformation case studies.
👉 Popup / Full-Screen View (Pro) 
Give viewers an immersive, distraction-free experience with full-screen comparison mode.
👉 Live Slider Preview (Pro) 
Preview exactly how your slider will look on the front end before publishing – adjust images, labels, and effects in real time.
👉 Slider Captions (Pro) 
Add context and storytelling to each comparison with customizable captions on both the Before and After sides: 
– Before: Top Left or Bottom Left 
– After: Top Right or Bottom Right
👉 Slider Badge (Pro) 
Highlight featured sliders with custom badges – “New,” “Edited,” “HD,” or any label you choose.
<h3>🔌 Seamless Integration With All Major Page Builders</h3>
BefTer works beautifully with every popular WordPress page builder:
✅ Elementor – Built-in widget for true drag-and-drop integration 
✅ Gutenberg / Block Editor – Use the Shortcode block for instant embedding 
✅ Divi – Insert shortcodes directly inside Divi modules 
✅ WPBakery / Visual Composer – Add shortcodes to any layout with ease 
✅ Bricks Builder – Fast, responsive sliders with zero custom code 
✅ Beaver Builder – Smooth, responsive sliders that blend with your design
No matter which builder you use, BefTer delivers a consistent, seamless experience.
<a href="https://codecanel.com/wp-before-after-image-slider/?utm_source=repo_upgrade&utm_medium=repo&utm_campaign=repo_productpage&utm_id=repo_productpage#features" rel="nofollow ugc">If you want to know more about the powerful functions and capabilities check the link.</a>
<h3>🎯 Perfect For Every Industry That Relies on Visual Impact</h3>
BefTer is trusted by professionals across a wide range of industries:
✅ Photography & Graphic Design – Highlight photo edits, retouching, UI/UX redesigns, and creative makeovers 
✅ Beauty, Wellness & Healthcare – Display skincare routines, cosmetic treatments, dental work, and body transformations 
✅ Home Improvement & Interior Design – Showcase remodeling, renovation, painting, and landscaping projects 
✅ Real Estate & Property Development – Compare staged vs. empty spaces, renovations, and new constructions 
✅ E-Commerce & Fashion – Show product variations, color options, packaging changes, and design upgrades 
✅ Automotive & Mechanical Services – Showcase vehicle restorations, detailing, and tuning transformations 
✅ Education & Research – Visualize scientific changes, historical comparisons, and learning progress 
✅ Food & Culinary Arts – Share recipe development, plating improvements, and food photography before-afters 
✅ Event Planning & Decor – Present event setup transformations, wedding decor, and seasonal reveals
<h3>Video Tutorials</h3>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/zkCY5GbscWQ?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/vPh08uFcKTY?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/eeCM0E2ggMo?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/-RL9Lun1kGg?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<h3>💬 Support & Community</h3>
We offer full support for BefTer via the WordPress.org support forums and our <a href="https://codecanel.com/account/support/" rel="nofollow ugc">official website</a>.
Before reaching out, please review our <a href="https://codecanel.com/support-policy/" rel="nofollow ugc">Support Policy</a> to understand response times and coverage.
👉 <a href="https://www.facebook.com/groups/codecanel" rel="nofollow ugc">Join our active Facebook Community</a> to stay updated with new features, tips, and announcements.
<h3>🔐 Security Vulnerability Reporting</h3>
We take security seriously. If you discover a vulnerability or bug, please report it immediately using our <a href="https://codecanel.com/contact/" rel="nofollow ugc">Contact Form</a> or by opening a <a href="https://codecanel.com/account/support/" rel="nofollow ugc">Support Ticket</a>. Our dedicated security team will promptly review and address any legitimate issues.
<h3>Our Other Plugins</h3>
👉 <a href="https://wordpress.org/plugins/writerush/" rel="ugc">WriteRush</a> – AI-Powered Content Writer & Complete Social Media Assistant 
👉 <a href="https://wordpress.org/plugins/reading-time-progress-bar/" rel="ugc">Reading Time & Progress Bar</a> – Display estimated reading time and a progress bar on posts

WP Before After Image Slider – Interactive Image and Video Comparison Plugin for WordPress

WP Before After Image & Video Slider for WordPress - Create Stunning Interactive Comparisons in Minutes. Lightweight, Responsive, No Coding Needed.

2FOX4 Before After vs WP Before After Image Slider – Interactive Image and Video Comparison Plugin for WordPress