sattivedevlabs

Help your visitors see the transformation with SlideDiff.
Built with UI/UX, SEO, and site speed in mind, SlideDiff provides a lightweight, high-performance slider to compare two images side-by-side. Whether you are a photographer showcasing edits, a contractor showing home renovations, or a designer displaying website redesigns, SlideDiff makes visual storytelling interactive and engaging.
Unlike other slider plugins that bloat your site with heavy external libraries, SlideDiff uses clean, modern CSS and vanilla JavaScript to ensure zero layout shifts and lightning-fast load times.
Key Features: 
* Orientation Control: Choose between Horizontal (left/right) or Vertical (up/down) sliding. 
* Touch & Mobile Optimized: Fluid swiping on phones and tablets. 
* Move on Hover: Optionally allow users to interact with the slider just by moving their mouse, no clicking required. 
* Performance First: Built-in lazy loading and the ability to select the exact WordPress image resolution (Thumbnail, Medium, Large, Full) to save bandwidth. 
* SEO Friendly: Custom Alt Text overrides for both the ‘Before’ and ‘After’ images. 
* Deep Customization: Fully customize the handle style (Arrows, Circle, Standard), handle color, label text, and label background colors to match your theme perfectly. 
* Shortcode Generator: Easily copy and paste the <code>[slidediff]</code> shortcode anywhere on your site, compatible with Gutenberg, Elementor, and all major page builders.
Brought to you by <a href="https://www.sattivedevlabs.com" rel="nofollow ugc">Sattive Dev Labs</a>.

SlideDiff – Easy Before/After Image Slider

Help your visitors see the transformation. SlideDiff provides a high-performance, touch-enabled slider to compare two images side-by-side.

Aspiring Web Developer

This plugin brings the power of Zurb TwentyTwenty to your blog. From our friends at Zurb:
<blockquote>
We recently needed a way to showcase the visual differences between two images. Folks tend to typically place two images next to each other in hopes that it’ll be clear exactly what changed. We even thought about having one image fade into another. But we knew there had to be an even better way to highlight the differences between two images. A way that would bring everything into focus.
</blockquote>
Find out more about TwentyTwenty, and see examples, on the <a href="http://zurb.com/playground/twentytwenty" rel="nofollow ugc">official TwentyTwenty site from Zurb</a>.
<a href="http://aspiringwebdev.com/gorgeous-before-and-after-pictures-in-wordpress/" rel="nofollow ugc">Watch this screencast</a> to see the plugin in action and learn how to use it.
<h3>Instructions</h3>
<ol>
<li>
Make sure your before and after images are the same size. The before-and-after box will use the size of the first image, and assume that the second image is the same size.
</li>
<li>
Insert two images into a post, one right after the other.
</li>
<li>
Before the first image, type <code>[twentytwenty]</code>. After the second image, type <code>[/twentytwenty]</code>. See the second screenshot for an example.
</li>
</ol>
<a href="http://aspiringwebdev.com/gorgeous-before-and-after-pictures-in-wordpress/" rel="nofollow ugc">Watch this screencast</a> to see the plugin in action and learn how to use it.

TwentyTwenty

Show before-and-after pictures in your blog, with an interactive slider that allows users to compare them.

SlideDiff – Easy Before/After Image Slider vs TwentyTwenty