Hozefa Saleh

The Before After Slider block allows you to create stunning image comparisons that engage your visitors. Perfect for showcasing transformations, renovations, product improvements, or any visual changes over time.
Key Features:
<ul>
<li>Dual Image Upload: Easy-to-use interface for uploading both “Before” and “After” images</li>
<li>Interactive Slider: Smooth drag-and-drop divider bar for seamless image comparison</li>
<li>Responsive Design: Automatically adapts between desktop and mobile layouts</li>
<li>Customizable Colors: Choose your preferred color for the slider divider and handle</li>
<li>Touch-Friendly: Optimized for both mouse and touch interactions</li>
<li>Accessibility Ready: Built with accessibility best practices in mind</li>
</ul>
Desktop Experience: 
– Vertical divider bar that slides left and right 
– Reveals more or less of the “After” image over the “Before” image 
– Smooth mouse drag interactions
Mobile Experience: 
– Automatically switches to horizontal divider bar on screens under 767px 
– Up and down sliding motion for touch-friendly interaction 
– Maintains smooth performance on mobile devices
Perfect for: 
* Real estate before/after renovations 
* Photography portfolio comparisons 
* Product transformation showcases 
* Website redesign comparisons 
* Medical or cosmetic procedure results 
* Landscape or architectural changes
<h3>Support</h3>
For support and feature requests, please visit our support forum or contact us through the plugin directory.

Responsive Before After Slider Block by Unique Solution

Interactive before and after image comparison slider with responsive design.

Binsaifullah

Beaf is a custom Gutenberg Block based plugin that is developed with Gutenberg Native Components. You can easily showcase the Photo Comparison. It comes with different styles and settings so that you can easily customize it as per your needs. It is a lite version of Beaf Pro. To get more features and options, you can check the <a href="https://beaf.gutenbergkits.com" rel="nofollow ugc">Beaf Pro</a>.
<h3>Overview</h3>
<ul>
<li><a href="https://beaf.gutenbergkits.com/demos" rel="nofollow ugc">See Demos</a></li>
<li><a href="https://beaf.gutenbergkits.com" rel="nofollow ugc">Get Beaf Pro</a></li>
</ul>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/OylHrkczwK4?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>Key Features</h3>
<ul>
<li>Simple, light-weight, and super-fast</li>
<li>Built with only Gutenberg Native Components</li>
<li>No Block Builder at all</li>
<li>100% Responsive</li>
<li>Horizontal & Vertical View</li>
<li>Images Comparison Options
<ul>
<li>Before & After Label</li>
<li>Comparison start on Hover</li>
<li>Horizontal & Vertical Comparison</li>
</ul>
</li>
<li>Easy to Use in Gutenberg Editor</li>
<li>Drag & Drop Use</li>
<li>No jQuery dependency</li>
</ul>
<h4>Beaf Pro features</h4>
<ul>
<li>3 Content Types (Image, Video, Iframe – Google Map)</li>
<li>Custom Label Styles</li>
<li>Custom Label Position</li>
<li>Custom Label Typography</li>
<li>Labels Animation Options</li>
<li>Custom Comparison Starting Point </li>
<li>Custom Comparison Line</li>
<li>Custom Comparison Line Color</li>
<li>Custom Comparison Line Thickness</li>
<li>Custom Caption for beaf slider</li>
</ul>
Beaf Pro is a premium version of Beaf. You can get more features and options in Beaf Pro. <a href="https://beaf.gutenbergkits.com" rel="nofollow ugc">Get Beaf Pro</a>

Beaf – Photo Comparison Block

Beaf is a Gutenberg Block developed with Gutenberg Native Components to showcase photo Comparison with different styles.

Responsive Before After Slider Block by Unique Solution vs Beaf – Photo Comparison Block