AvatarBefore & AfterImage Slider
Avatar Before and After Image Slider allows you to add two images to easily and conveniently display them artistically and compare both at the same time.
This module it’s a great way to showcase and compare before and after work like photo retouching, sketching, and final artwork, various projects like a house, backyard, or lawn remodeling, and more.
The slider supports horizontal or vertical orientation, colors, and labels customization options, as well as the way the user interacts with it.
AMAZING
Module Features
- Set Before and After Images for comparison
- Custom Alt image text for SEO
- Custom Before and After Labels
- Stylize labels individually
- Stylize the Overlay background color
- Change between Vertical or Horizontal orientation
- Hide Labels and Overlay
- Multiple Slider interactions
- Advanced background for slider components
- Ability to stylize the Slider Divider
- And many more…
Demos
Explore some of our demos below to get you inspired.
DEMOS
![Model Black & White](https://avatardivi.com/wp-content/uploads/Before_Model_BW.jpg)
![Model Color](https://avatardivi.com/wp-content/uploads/After_Model_Color.jpg)
DEMO 01
Default Implementation.
![Autumn](https://avatardivi.com/wp-content/uploads/Before_Autumn.jpg)
![Winter](https://avatardivi.com/wp-content/uploads/After_Winter.jpg)
DEMO 02
Advanced Styling | Custom Overlay | Custom Labels | Custom Handle.
![Hands Blurred](https://avatardivi.com/wp-content/uploads/Before_Hands_Blurred.jpg)
![Hands Sharp](https://avatardivi.com/wp-content/uploads/After_Hands_Sharp.jpg)
DEMO 03
Vertical | Custom Handle | Automatic Scroll.
![Damage Photo](https://avatardivi.com/wp-content/uploads/photo_repair_original.png)
![Restored Photo](https://avatardivi.com/wp-content/uploads/photo_repair_restored.png)
DEMO 04
Horizontal | Custom Handle | Custom Labels
![Beach Time Lenses On](https://avatardivi.com/wp-content/uploads/Before_Beach_Look.jpg)
![Beach Time Lenses Off](https://avatardivi.com/wp-content/uploads/After_Beach_Look.jpg)
DEMO 05
Vertical | No Overlay Effect | Custom Handle | Custom Arrows | Offset Center
Fantasy Demo
![Sketch](https://avatardivi.com/wp-content/uploads/avatardivi_logo_w_sketch.png)
![Completed](https://avatardivi.com/wp-content/uploads/avatardivi_logo_w_sketch_full.png)