Compare Stack
A fully responsive, interactive, A / B image comparison stack.
Description
Compare is a fully responsive, interactive, A / B image comparison stack.
You can display pairs of images, of the before and after type, for example, before and after Photoshop retouching, or before and after a home remodelling project. Anything really. If you want to show differences between two images, this is a great interactive way to present that to your visitor.
The stack will accept images of any size or aspect ratio. The only prerequisite is that both images have been made equal size.
The stack is filly responsive, and works equally as well where ever you place it, at any screen size. It's nice and simple to use, with a well thought out user interface in Stacks edit mode, with just enough options to make the stack fit into your page design, offering the ability to colour the various elements of the presentation to your taste.
Demo
Slide the handle in the demo below to see Compare in action.
User Settings
A comprehensive overview of this stacks user settings.
Just drag and drop your appropriate images into each of these drop zones. The only prerequisite is that both of the images are of the same size.
You can choose the position the divider between each image is displayed when the page first loads. The is a percentage value from the left of the stack.
This sets the thickness of the divider line between the two images.
This sets the colour of the divider line between the two images.
This sets the size of the drag handle that prompts the user to drag the slider left and right.
This sets the background colour of the drag handle that prompts the user to drag the slider left and right.
This set the colour of the arrows that appear on the drag handle that prompts the user to drag the slider left and right.
Last modified %(last_mod)%