Responsive Before After Slider Block by Unique Solution Reviews, Downloads & Maintenance

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:

Dual Image Upload: Easy-to-use interface for uploading both “Before” and “After” images
Interactive Slider: Smooth drag-and-drop divider bar for seamless image comparison
Responsive Design: Automatically adapts between desktop and mobile layouts
Customizable Colors: Choose your preferred color for the slider divider and handle
Touch-Friendly: Optimized for both mouse and touch interactions
Accessibility Ready: Built with accessibility best practices in mind

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

Support

For support and feature requests, please visit our support forum or contact us through the plugin directory.

Installation

Upload the plugin files to the /wp-content/plugins/unique-before-after-slider directory, or install the plugin through the WordPress plugins screen directly.
Activate the plugin through the ‘Plugins’ screen in WordPress
Add the “Before After Slider” block to any post or page through the Gutenberg editor
Upload your before and after images
Customize the slider color to match your site’s design

Frequently Asked Questions

What image formats are supported?

The block supports all standard WordPress image formats including JPEG, PNG, GIF, and WebP.

Can I customize the appearance of the slider?

Yes! You can customize the color of the divider bar and handle through the block settings in the editor sidebar.

Does it work on mobile devices?

Absolutely! The block automatically adapts to mobile devices by switching from a vertical to horizontal slider orientation for optimal touch interaction.

Is the block accessible?

Yes, the block is built with accessibility in mind and includes proper ARIA labels and keyboard navigation support.

Can I use different sized images?

The block automatically handles different image dimensions and will scale them appropriately while maintaining the comparison functionality.

Review feed

No reviews available

Screenshots

Desktop view showing vertical slider with before/after images
Mobile view displaying horizontal slider orientation
Block editor interface with image upload placeholders
Inspector controls showing color customization options

Changelog

0.1.0

Initial release
Desktop vertical slider functionality
Mobile horizontal slider adaptation
Color customization options
Responsive design implementation
Touch and mouse interaction support

Back to plugins