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.
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