Image Comparison
Available as: Web ComponentShortcodeOxygen ElementCompare two images visually using a slider. Handy for showing subtle (or not so subtle) before/after differences.
Properties
active
Type: boolean
color
Type: stringDefault: #ffffffCSS Variable: --spx-image-comparison-color
height
Type: stringDefault: 100%CSS Variable: --spx-image-comparison-height
icon-color
Type: stringDefault: var(--spx-color-gray-900)CSS Variable: --spx-image-comparison-icon-color
lazy
Type: boolean
Lazy load images.
src-after
Type: stringDefault: https://source.unsplash.com/random/1200x300
Image URL of the before image.
src-before
Type: stringDefault: https://source.unsplash.com/random/1201x300
Image URL of the after image.
start
Type: numberDefault: 150
Opening state in pixels.
steps
Type: numberDefault: 10
Step amount when using component with arrow keys.
Events
spxImageComparisonDidLoad
Fires after component has loaded.