Comparison
Compare visual differences between similar content with a sliding panel.
This is especially useful for comparing images, but can be used for comparing any type of content (for an example of using it to compare entire UIs, check out our theme page). For best results, use content that shares the same dimensions. The slider can be controlled by dragging or pressing the left and right arrow keys. (Tip: press shift + arrows to move the slider in larger intervals, or home + end to jump to the beginning or end.)
Comparison( _.slots.before( img( src := "https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5", alt := "Grayscale version of kittens in a basket looking around." ) ), _.slots.after( img( src := "https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80", alt := "Color version of kittens in a basket looking around." ) ))()Examples
Initial Position
Use the position attribute to set the initial position of the slider. This is a percentage from 0 to 100.
Comparison( _.position := 25, _.slots.before( img( src := "https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80", alt := "A person sitting on bricks wearing untied boots." ) ), _.slots.after( img( src := "https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80", alt := "A person sitting on a yellow curb tying shoelaces on a boot." ) ))()