Omnira Docs v1.0.0

Section reference › Showcase & media

Before / after slider "type": "before-after"

Two photos stacked on top of each other with a draggable handle to compare them. Ideal for renovations, dental work, retouching or cleaning results.

Example of the before-after section
The example below, rendered with placeholder images.

Example#

Paste this into the sections list of a page file:

JSON
{
  "type": "before-after",
  "eyebrow": "Kitchen renovation",
  "title": "Same room, three weeks later",
  "text": "Drag the handle to see how we opened up this 1970s galley kitchen.",
  "before": "placeholder",
  "after": "placeholder",
  "beforeLabel": "Before",
  "afterLabel": "After"
}

Options#

OptionTypeDefaultDescription
eyebrowstring—Small label shown above the title.
titlestring—Section heading. Simple inline HTML such as <em> or <br> is allowed.
textstring—Short intro paragraph under the title.
headAlignstringcenterAlignment of the eyebrow/title/text block. Any value other than "center" (e.g. "start") left-aligns it.
Values: center | start
beforestring—The "before" photo (shown on the left of the handle).
afterstring—The "after" photo (shown on the right of the handle).
beforeLabelstringBeforeLabel on the before side (also its alt text).
afterLabelstringAfterLabel on the after side (also its alt text).

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Tips#

  • Use two photos with exactly the same size and framing, otherwise they will not line up.
  • The slider also works with the keyboard (it is a range input) and on touch screens.

Where it's used#

Open these pages in template/ to see it working:

  • Creative Agency: template/creative-agency/home-2.html (source src/demos/creative-agency/pages/home-2.json)
  • Coffee Shop: template/cafe/coffee.html (source src/demos/cafe/pages/coffee.json)
  • Gym & Fitness: template/gym/about.html (source src/demos/gym/pages/about.json)
  • Dental Clinic: template/dental/index.html (source src/demos/dental/pages/index.json)
  • Construction: template/construction/index.html (source src/demos/construction/pages/index.json)
  • Architecture Studio: template/architecture/home-2.html (source src/demos/architecture/pages/home-2.json)
  • Interior Design: template/interior-design/index.html (source src/demos/interior-design/pages/index.json)
  • Charity: template/charity/home-2.html (source src/demos/charity/pages/home-2.json)