Fullscreen Slider Template
A one-page hotel site built on a full-screen room slider: six full-bleed photographs walked through one frame with a curtain wipe, a live rate and a plan of the house, a day you drag through hour by hour, and a stay builder. Re-points to a boutique hotel, a B&B or guesthouse, a hostel, a holiday resort, a restaurant with rooms or a wedding venue.
About This Template
The Fell House is a complete one-page site for a twelve-room hotel in a converted mill, written the way a good small hotel writes: plainly, with figures, in one bold typeface at two weights on a bottle-green ground. Six kinds of room fill the screen one at a time; breakfast has hours; the places you can walk to have minutes next to them. The fiction is a mill on a river in the Yorkshire Dales, and the same page becomes a boutique hotel, a B&B, a hostel, a resort, a restaurant with rooms or a wedding venue with the six photographs and the copy changed.
Read the full template overview
Three interactions carry it, each on a different input. The rooms are a full-screen slider: the arriving photograph wipes over the last with a curtain while it drifts away, the room name rises through its mask, the nightly rate and sleeps count to their new values, and a small plan of the house lights the room you are looking at. A day here is a rail you drag through the hours: the photograph behind crossfades from the river at dawn to the fire at ten, the clock counts, the caption changes and the green of the section warms toward noon and cools at night. Book a stay is a builder: pick a room, a season and a number of nights, and the total counts to its figure while the bars re-height for each season.
Everything is static HTML, CSS and one script: no build step, no framework, one typeface. Repaint four values in the token block to reskin it, drop your own photographs into assets/img, add or remove a room by copying one block, and the plan, the band and the builder read the change by themselves.
What's Included
- Full-screen room slider: six full-bleed photographs through one frame, a curtain wipe with the leaving photograph drifting the other way, the room name rising through its mask, and a live rate, sleeps and plan of the house in the band
- Four inputs on the slider: the band's buttons, the arrow keys while the frame is on screen, a horizontal drag or swipe, and a sideways wheel or trackpad swipe; a vertical wheel is left to the page
- A day here: a rail you drag through the hours with a marker that follows the pointer and settles to the nearest of four hours on an elastic ease; the photograph crossfades, the clock counts, the caption changes and the section's green tints with the hour
- Stay builder: room, season and nights make one figure that counts to its value, with a breakdown line, a bar per season and the room lit on a plan of the house you can click to pick a room
- A plan of the house drawn once in SVG and used twice, in the slider band and beside the builder, so adding a room is one article and one rectangle
- One family (Bricolage Grotesque) at two weights on a committed bottle-green ground with cream paper sections, one apricot accent kept to the green, and every translucent value mixed from RGB triples
- Fifteen baked WebP photographs, graded as one set, 2.1MB in total, with a manifest to regenerate them from your own
- Designed reduced-motion page: the six rooms stack as full-height panels, the rail and the builder still work with their changes applied instantly
- Readable with JavaScript disabled or the CDN blocked, every room, menu line and place included
- Lenis smooth scroll wired on the shared GSAP clock, opt-out per page or per URL
Perfect For
- Boutique hotels and inns with a handful of room types worth a screen each
- B&Bs and guesthouses that want to sell on the rooms rather than a booking widget
- Hostels, bunkhouses and holiday resorts with several kinds of stay to compare
- Restaurants with rooms, pubs with rooms and farm stays
- Wedding and event venues showing the spaces and the day
- Any place sold on photographs of its rooms and a walk from the door
How It Works
Structure
One script, one setup and teardown path, one init function per section, each returning early when its markup is absent, so any section can be deleted. A synchronous head script adds .has-js before first paint so the reveal gates apply without a flash, and the main script removes it again if the CDN is blocked. The six rooms are read once from their data attributes into one list that the slider band and the booking builder both use, which is why a new room needs a new article and nothing else. The nav sits in the flow at the top of the page rather than fixed, so it never lies over a room photograph.
The room slider
The six rooms are complete panels in the markup. With motion allowed a stage class stacks them into one full-height frame, and each transition is one timeline: the arriving room's curtain is a clip-path inset that wipes open from the side the visitor came from while its photograph slides the last few percent into place and settles from a slight zoom; the leaving photograph drifts the other way; the old name drops through its mask and the new one rises; the rate and sleeps tween through one counter object; and the plan's dot walks to the new rectangle. A request that arrives mid-transition completes the running timeline instantly before starting the next, so holding an arrow key never tears the curtain. The Observer plugin handles the drag, swipe and sideways wheel on the x axis only.
A day here
One number, the hour, drives everything. Each of the four photographs has an hour, and the opacity of each is a piecewise-linear function of how far the current hour sits between its neighbours, so any position on the rail is a blend of the two nearest. The clock, the rail fill, the marker position and the tint colour are set from the same number on every update, and the caption swaps when the nearest hour changes. Dragging tweens the hour toward the pointer with a short ease and pointer capture; release tweens it to the nearest of the four hours on an elastic ease. The marker is a slider in the accessibility tree, with arrow keys for an hour and Page keys for a keyframe.
The stay builder
The room cards, the season chips and the nights stepper each set one value and call the same paint function. It rounds the room's base rate by the season's factor to a nightly figure, multiplies by nights, tweens a counter object to the total, rewrites the breakdown line, re-heights the four bars as a fraction of the dearest season, and lights the room on the plan. The base rates and season factors are data attributes in the markup. The form beneath is a static front end: submitting it says so in the note under the button rather than reloading the page.
Without JavaScript or motion
Without the script the page is a plain document: six full-height room panels with their own figures, the plan and a book link after them, the menu, the day with its first photograph and caption, the builder's starting figure and the enquiry form. Under prefers-reduced-motion the CSS keeps the stacked layout and restores every gated element, the script skips the slider and the reveals, and the rail and the builder still work with their changes applied instantly.
Questions about this template
It's a hotel in the demo. What else does this design suit?
Anything sold on full-screen photographs of its rooms or spaces: a boutique hotel, a B&B or guesthouse, a hostel or bunkhouse, a holiday resort, a restaurant with rooms, a wedding or event venue. The six slides are six rooms here, but each is just a photograph, a name, a line and three figures, so they become six cabins, six suites, six event spaces or six apartments by editing the text. Nothing in the layout says hotel except the words.
Does the booking form actually take bookings?
No. The stay builder works out a real figure from the room, the season and the nights, but the enquiry form beneath it is a static front end and sends nowhere; pressing the button says so in the note under it. Point the form at Formspree, Netlify Forms or your booking engine's enquiry endpoint and it becomes a real enquiry, or replace the whole block with your booking widget and keep the builder as a price guide.
The rates and the menu prices are made up, aren't they?
Yes. The six nightly rates, the four season factors and the supper prices are demo figures for a fictional mill in the Dales. Each room's rate is a data attribute on its block and the season factors are data attributes on the chips, so the builder and the slider band update from wherever you set them. The menu is plain text with a price beside each line.
Can I use my own photographs, and what happens to the fifteen included?
Yes. The fifteen are graded WebP derivatives of Pexels photographs, bundled for the demo, and you can ship them or replace them. Drop your own files into assets/img with the same names, or edit assets/img-manifest.json with your sources and run the bake script to get matched, optimised WebP with one grade across the set. Room photographs want to be about 1920 pixels wide and landscape; the three small ones in Around can be 900.
I have four kinds of room, not six. Or nine.
Copy or delete a room block in index.html and give it a rate, a sleeps figure, a size and a plan key. The slider, its counter, the band and the builder's room list all read the number of rooms from the markup, so there is nothing to retune. Add a rectangle with the same key to the two small plans if you want the room to light up on them, or delete both plans and lose nothing else. Two rooms is the fewest that still reads as a slider.
Does the room slider work on a phone?
Yes. A horizontal swipe on the photograph moves between rooms, the arrows in the band work, and a vertical swipe scrolls the page as normal because the slider only listens on the sideways axis. The day rail is dragged by a finger, and a tap anywhere on it jumps there. Everything the builder does is a tap on a card, a chip or a stepper.
How do I recolour it?
Four values in the token block at the top of style.css: the green ground, a darker green for the band and footer, the cream paper and the one apricot accent, each with its RGB triple beside it. Every rule, scrim, dimmed label and focus ring is one of them at another alpha, so nothing is left in the old colour. The contrast for each pair as used is written in the same comment, including the rule that the accent is never text on the cream.
