--- /** * Compare — a before/after image comparison slider. Two images are * stacked; the first (top) image is clipped at a movable divider with a * handle. In "hover" mode the divider follows the pointer and springs * back to its initial position on pointer leave; in "drag" mode it only * moves while the pointer is pressed. An optional autoplay sweeps the * divider back and forth and pauses while the user interacts with it or * while the component is scrolled out of view. * * A custom element writes the divider position into the `--pos` CSS * variable (a percentage), consumed by `clip-path` on the top image * layer and by the divider's `left` offset. */ interface Props { /** URL of the image shown left of the divider (top layer). */ firstImage?: string; /** URL of the image shown right of the divider (base layer). */ secondImage?: string; /** Additional classes for the root element. */ class?: string; /** Additional classes for the first (top) image. */ firstImageClassName?: string; /** Additional classes for the second (base) image. */ secondImageClassName?: string; /** Starting divider position, in percent (0-100). */ initialSliderPercentage?: number; /** "hover" follows the pointer; "drag" needs a press to move it. */ slideMode?: 'hover' | 'drag'; /** Show the round handle with the grip icon on the divider. */ showHandlebar?: boolean; /** Sweep the divider back and forth automatically while idle. */ autoplay?: boolean; /** Duration of one autoplay sweep direction, in ms. */ autoplayDuration?: number; } const { firstImage = '', secondImage = '', class: className, firstImageClassName, secondImageClassName, initialSliderPercentage = 50, slideMode = 'hover', showHandlebar = true, autoplay = false, autoplayDuration = 5000, } = Astro.props; const initial = Math.max(0, Math.min(100, initialSliderPercentage)); ---

{ secondImage ? ( second image

) : null }

{ firstImage ? ( first image

) : null }

Installation

Install dependencies

Add these files

Configuration

Use it