# BeforeAfter

> Interactive slider comparing two images for transformations

Canonical URL: https://fa7e86e3d553:3005/islands/content/before-after

> Interactive slider comparing two images. Perfect for skincare results, home renovation, transformations.

## Preview

**Category**: Content

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| before | object | yes | - | Before image object with src (string) and label (optional string) |
| after | object | yes | - | After image object with src (string) and label (optional string) |
| orientation | enum | no | horizontal | Slider direction: 'horizontal' or 'vertical' |
| initialPosition | number | no | 50 | Initial slider position (0-100, percentage) |

## Embed Example

```html
<lx-island name="BeforeAfter">
  <script type="application/json">
{
  "before": {
    "src": "example-src"
  },
  "after": {
    "src": "example-src"
  }
}
  </script>
</lx-island>
```

## Usage Patterns

**Skincare/Beauty PDP:**

```html
<lx-island name="BeforeAfter">
  <script type="application/json">
{
  "before": {
    "src": "example-src"
  },
  "after": {
    "src": "example-src"
  }
}
  </script>
</lx-island>
```

**Vertical comparison** (for full-body shots):

```html
<lx-island name="BeforeAfter">
  <script type="application/json">
{
  "before": {
    "src": "example-src"
  },
  "after": {
    "src": "example-src"
  }
}
  </script>
</lx-island>
```

## Tips

- Images should be **same dimensions** for best effect
- Use high-quality, well-lit photos with consistent framing
- orientation:'horizontal' works for most use cases (face shots, products)
- orientation:'vertical' better for full-body transformations
- initialPosition:50 shows equal before/after (default)
- initialPosition:30 emphasizes after image (reveals more of it)
- Labels are optional but help clarify timeline (e.g. "Day 1", "2 weeks", "After 30 days")

## Stylable Parts

Target internal elements via `data-part` selectors in section CSS:

| Part | Description |
|------|-------------|
| `root` | Outermost container |

```css
/* Example: custom styling */
[data-section-id='SECTION'] [data-part='root'] {
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
```

## Related Islands

- [VideoPlayer](/islands/content/video-player) — For animated transformations or product demos
- [ImageZoom](/islands/content/image-zoom) — For high-res product detail shots