Media Fancy Stable
Compare
Before/after image comparison slider split by a blade of light: a white-hot seam with a chromatic fringe, pulses running along it and a trail that stretches with the speed of the gesture
Preview
svelte
<script lang="ts">
import { Compare } from "fancy-ui-svelte";
</script>
<div class="flex justify-center">
<Compare
firstImage="https://images.unsplash.com/photo-1505765050516-f72dcac9c60e?w=800&q=80"
secondImage="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=80"
firstImageAlt="Forest in autumn"
secondImageAlt="Mountains at sunrise"
class="rounded-lg"
/>
</div>Installation
pnpm add fancy-ui-svelte
import { Compare } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { Compare } from 'fancy-ui-svelte';
</script>
<Compare />Examples
Basic Usage
Hover mode comparison.
svelte
<script lang="ts">
import { Compare } from "$lib/fancy-ui/compare";
</script>
<div class="flex justify-center">
<Compare
firstImage="https://images.unsplash.com/photo-1505765050516-f72dcac9c60e?w=800&q=80"
secondImage="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=80"
firstImageAlt="Forest in autumn"
secondImageAlt="Mountains at sunrise"
class="rounded-lg"
/>
</div>Drag Mode
Click and drag to control.
svelte
<script lang="ts">
import { Compare } from "$lib/fancy-ui/compare";
</script>
<div class="flex justify-center">
<Compare
firstImage="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800&q=80"
secondImage="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800&q=80"
firstImageAlt="Desert landscape"
secondImageAlt="Ocean view"
slideMode="drag"
class="rounded-lg"
/>
</div>Autoplay
Automatic animation.
svelte
<script lang="ts">
import { Compare } from "$lib/fancy-ui/compare";
</script>
<div class="flex justify-center">
<Compare
firstImage="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80"
secondImage="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&q=80"
firstImageAlt="Mountain peak"
secondImageAlt="Mountain range"
autoplay
autoplayDuration={3000}
class="rounded-lg"
/>
</div>Custom Content
Use snippets instead of images.
svelte
<script lang="ts">
import { Compare } from "$lib/fancy-ui/compare";
</script>
<div class="flex justify-center">
<Compare class="rounded-lg">
{#snippet firstContent()}
<div
class="flex size-full items-center justify-center bg-gradient-to-br from-violet-600 to-indigo-600"
>
<span class="text-2xl font-bold text-white">Before</span>
</div>
{/snippet}
{#snippet secondContent()}
<div
class="flex size-full items-center justify-center bg-gradient-to-br from-rose-600 to-orange-600"
>
<span class="text-2xl font-bold text-white">After</span>
</div>
{/snippet}
</Compare>
</div>Beam Colors
Tint the seam with your own colours.
svelte
<script lang="ts">
import { Compare } from "$lib/fancy-ui/compare";
</script>
<div class="flex justify-center">
<Compare
firstImage="https://images.unsplash.com/photo-1505765050516-f72dcac9c60e?w=800&q=80"
secondImage="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=80"
firstImageAlt="Forest in autumn"
secondImageAlt="Mountains at sunrise"
beamColors={["#f59e0b", "#fb7185", "#a855f7"]}
class="rounded-lg"
/>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
firstImage | string | "" | URL of the first (left) image |
secondImage | string | "" | URL of the second (right) image |
firstImageAlt | string | "First image" | Alt text for the first image |
secondImageAlt | string | "Second image" | Alt text for the second image |
firstContentClass | string | "" | CSS classes for the first content container |
secondContentClass | string | "" | CSS classes for the second content container |
initialSliderPercentage | number | 50 | Initial slider position (0-100) |
slideMode | "hover" | "drag" | "hover" | How the slider is controlled |
showHandlebar | boolean | true | Show the drag handle bar |
autoplay | boolean | false | Automatically animate the slider back and forth |
autoplayDuration | number | 5000 | Duration of one autoplay cycle in ms |
beamColors | string[] | ["#22d3ee", "#818cf8", "#f472b6"] | Beam colours: left fringe, centre, right fringe (one or more colours) |
label | string | "Comparison slider" | Accessible name of the slider |
Slots
| Slot | Description |
|---|---|
firstContent | Custom content to render in the first (left) panel instead of an image |
secondContent | Custom content to render in the second (right) panel instead of an image |
handle | Custom drag handle element |