060
AI ready

Fullscreen Slider Template

£15 View live demo or the whole Vault, £79.20

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.

ScrollTriggerObserver Lenis advanced
12 more details
fullscreen-slidercurtain-revealclip-pathmask-revealcount-updragcrossfadeclick-statesvg-animationkeyboard-navigationtouch-gesturesscroll-reveal
Open Fullscreen Slider Template template in new tab

Released

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.

Fullscreen Slider Template - website template preview

What's included

10 items
  • 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

6 use cases
  • 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

5 sections

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.

Plugins ScrollTrigger, Observer
Difficulty Advanced
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

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.

Paid template

Purchase to unlock the code.

Buying Fullscreen Slider Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£15 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £79.20, one payment.

Documentation

Quick Start

1. Upload the folder. index.html, assets/style.css, assets/script.js (or assets/script.min.js), assets/fonts/ and assets/img/ are the whole site. Any static host will do.

2. Check the <head>. Three things must stay, in this order:

Code snippet omitted: it ships with the download.

That one-line script must stay synchronous and stay in <head>. It is what stops every reveal target painting visible for a frame and then flashing to zero. data-cfasync="false" stops Cloudflare Rocket Loader deferring it, which would bring the flash back on the live site only.

3. Keep the scripts before </body>:

Code snippet omitted: it ships with the download.

4. Swap the six room photographs and rewrite the copy. Everything else is optional.

Sections and their options

Each section is initialised by its own function and every one returns early when its markup is missing, so you can delete any section from index.html without touching the JavaScript.

Section Hook What you can change
Rooms [data-rooms] Each article.room is one slide. data-name, data-rate, data-sleeps, data-size and data-plan feed the band and the builder. Copy or delete a block to change the number of rooms.
Eat #eat Plain markup: the photograph, the hours, and two lists of dishes with prices.
A day here [data-day] Each img[data-day-img="<hour>"] is a keyframe; the captions live in the data-day-captions JSON block keyed by the same hours. Add or remove a photograph and a caption together. The rail's range is aria-valuemin / aria-valuemax on the marker.
Book a stay [data-book] Season factors are data-factor on the chips. The room cards are native radios (name="room") whose values are the plan keys, so arrow keys move between them and the form posts the room without script; each room drawn on the plan is a button that picks the same radio. Leaving is worked out from the arrival date plus the nights and posted as a hidden leave field. The form is a static front end (see below).
Around #around A numbered list; the minutes are plain text.

Rooms

The slider listens for four inputs: the band's arrow buttons, the left and right arrow keys while the frame is on screen, a horizontal drag or swipe on the photograph, and a sideways wheel or trackpad swipe. A vertical wheel scrolls the page as normal. Anything on the page can jump to a room with data-jump-room="<plan key>" on a link or button.

The transition is one timeline per room change. Asking for another room while one is running completes the running one instantly and starts the next, so holding an arrow key rips through all six without the curtain tearing.

The plan of the house

The small plan appears twice, in the slider band and beside the builder, and both are plain inline SVG. Each rect carries data-plan-room="<key>"; the room whose data-plan matches is filled and the dot walks to its centre. To add a room to the plan, add a rectangle with its key. To drop the plan entirely, delete both <svg> blocks; nothing else depends on them.

A day here

The marker is a slider in the accessibility tree. Arrow keys move it an hour, Page Up and Page Down move it to the next photograph's hour, Home and End go to the ends. Dragging follows the pointer; letting go settles to the nearest photograph's hour. The four buttons under the rail jump to the four hours. The section's green tints warmer toward noon and cooler at night through the --tint-rgb custom property, which the script sets from three anchors in initDay.

The stay builder

Each room's base rate is data-rate on its slide; each season's multiplier is data-factor on its chip. The nightly figure is the base rate times the factor, rounded to the pound; the total is that times the nights. Change the figures in the markup and the builder follows.

The enquiry form is not wired

This is a static front end. The form under the builder collects a name, an email and two dates and sends them nowhere; pressing the button says so in the note beneath it. To make it real:

  • Formspree: set action="https://formspree.io/f/<your-id>" and method="post", and remove the submit handler in initBook.
  • Netlify Forms: add data-netlify="true" and a name attribute to the form.
  • A booking engine: most have an enquiry endpoint or an embeddable widget; replace the form block with it and keep the builder as a price guide.

Palette

Four solids in the token block at the top of assets/style.css, each with its RGB triple: --moss (the green ground), --moss-deep (the band and footer), --cream (the paper sections) and --apricot (the one accent). Every rule, scrim, dimmed label and focus ring is one of them at another alpha, so repainting the four reskins the page.

The measured contrast for every pair as used is in the :root header comment. The one rule to keep: the apricot is text only on the green. On the cream it measures 1.7:1, so there it is a fill behind green type (which is what the Eat section's button does), never a colour for type or a rule.

The type is one family, Bricolage Grotesque, at 400 and 700. To change it, swap the font file and --font (see Fonts below); the page runs on the ratio between the room names and the small labels rather than on the face itself, so a different bold grotesk keeps the composition.

Fonts

Bricolage Grotesque is self-hosted in assets/fonts/ so the page has no render-blocking third-party request. The file is the Latin subset Google Fonts serves (the variable font, optical size and weight), declared by the @font-face rules at the top of assets/style.css with the same weights and unicode-range Google uses, and preloaded in the <head>. Licence: SIL Open Font License 1.1 (Copyright 2022 The Bricolage Grotesque Project Authors, https://github.com/ateliertriay/bricolage).

To swap it, put your .woff2 files in assets/fonts/, point the @font-face rules and --font at them, and change the preload href (or drop the preload). To go back to Google Fonts instead, delete the @font-face rules and the preload and add the Google Fonts <link> to the <head>.

Photographs

The fifteen images in assets/img/ are optimised WebP derivatives, graded as one set, of photographs from Pexels. They are bundled so the template renders as demonstrated. They are not licensed to you as stock photography, so replace them with your own for production use.

To use your own: drop files with the same names into assets/img/, or edit assets/img-manifest.json with your sources (local paths or URLs) and run the bake script that produced them:

Code snippet omitted: it ships with the download.

It crops, resizes, applies the grade in the manifest and writes WebP. Room photographs want to be 1920 wide and landscape; the day photographs the same; the Around strip 900. The breakfast photograph also has a 960-wide copy (eat-breakfast-960) that phones pick through its srcset; a replacement needs both.

Only the first room's photograph loads with the page. The other five rooms and the later hours of the day are held back until the page's load event (the .is-warm rules in assets/style.css, released in assets/script.js), then fetched straight away, so the first slide is not sharing the connection with photographs nobody can see yet.

Credits. The originals are Pexels photographs, licensed under the Pexels licence, which permits modification and redistribution without attribution. The credits are given anyway:

File Source
room-mill https://www.pexels.com/photo/20975731
room-loft https://www.pexels.com/photo/6087207
room-weir https://www.pexels.com/photo/20215588
room-bath https://www.pexels.com/photo/34608486
room-snug https://www.pexels.com/photo/7641407
room-cottage https://www.pexels.com/photo/5411809
eat-breakfast https://www.pexels.com/photo/3758002
day-dawn Pexels 20635164 (Pexels licence; the photo page has since been removed)
day-noon https://www.pexels.com/photo/8841471
day-walk https://www.pexels.com/photo/36802566
day-evening https://www.pexels.com/photo/34302907
book-barn https://www.pexels.com/photo/30035201
around-bridge https://www.pexels.com/photo/35739849
around-falls https://www.pexels.com/photo/35739732
around-pub https://www.pexels.com/photo/36803013

Accessibility and fallbacks

  • No JavaScript, or the CDN blocked: the head script's class is removed and 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, the builder's starting figure and the form.
  • Reduced motion: the six rooms stack as full-height panels, nothing is hidden, the rail and the builder still work with their changes applied instantly, and Lenis does not start.
  • Keyboard: the slider on the arrow keys while it is on screen; the rail marker is a slider with arrow, Page, Home and End keys; every chip, stepper button and link is a real button or link.
  • Touch: a horizontal swipe moves the slider and a vertical one scrolls the page; the rail marker drags under a finger and a tap on the rail jumps.
  • Screen readers: the rooms are a carousel of slides, only the current one exposed; the band's rate and the builder's total are live regions.

Smooth scroll

Lenis is wired on the shared GSAP clock and is opt-out: data-smooth="off" on <html> or ?smooth=off in the URL turns it off, and it is off automatically under reduced motion. Every animation on the page is correct either way.

Requirements

GSAP 3.12+ with ScrollTrigger and Observer (built against 3.15.0), Lenis 1.3.17 (optional). Bricolage Grotesque, self-hosted in assets/fonts/.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.