Skip to content
Forge

Before and after slider

Two stacked photos and a draggable handle to show your renovations, haircuts or gardens before and after.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

The handle is a real range input: arrow, Home and End keys, a "Before 60 %, after 40 %" announcement for screen readers, and mouse or finger dragging anywhere on the photo. Three projects are picked with toggle buttons. Without JavaScript the photos stay split in the middle; with prefers-reduced-motion the handle moves without animation. Gradients are replaced by your photos while keeping the alternative text.

Code

Loading the code…

Archive contents

galerie-avant-apres-curseur-html-tailwind.zip3 files · 6 Ko

  • index.html14 Ko
  • README.md3 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 16, 2026.

In the same spirit

  • Project gallery with lightbox

    Free

    A tradesperson's portfolio: a grid of jobs filtered by type of work, with place, year and duration, and a full-screen lightbox with captions and keyboard navigation.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Filterable gallery

    Free

    A photo grid filtered by theme, with toggle buttons and an announcement of how many photos are shown.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Image carousel

    Free

    A photo carousel with previous, next, dots and a pause button, which never advances on its own when the user reduces motion.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Weekly class schedule

    Free

    A studio or school's weekly timetable, filterable by discipline and level, with remaining places and a day-by-day view on mobile.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component