Editorial Project Carousel

Quick Start

Include the stylesheet, GSAP core and the section script:

Code snippet omitted: it ships with the download.

Copy the complete section root from index.html:

Code snippet omitted: it ships with the download.

The body background and <main> in index.html are preview context. The extractable product starts at <section class="fpc"> and ends at its closing tag.

Make it yours

Edit the introduction in .fpc__intro, then update each [data-fpc-project] article:

• Replace the image file, intrinsic dimensions and useful alt text.
• Change the project name, outcome sentence and Type, Place and Year facts.
• Point .fpc__project-link at the real case-study URL.
• Update the folio number and --fpc-progress percentage when changing the project count.
• Adjust the article's --fpc-position when the replacement image needs a different crop.

The small brand system lives at the top of assets/style.css on .fpc. Repaint --fpc-paper, --fpc-ink and --fpc-accent, replace --fpc-serif and --fpc-sans, or change the width, gutter, section spacing and corner radius there. No external font files are required. For example:

Code snippet omitted: it ships with the download.

Keep --fpc-ink-rgb synchronized with --fpc-ink; it supplies the muted text and rule colours. The 8:5 desktop and 5:4 narrow image crops are load-bearing parts of the composition, so inspect both after replacing imagery.

Behaviour and options

Attribute	Default	Purpose
data-duration	0.68	Project transition duration in seconds. Use 0 for an immediate change.
data-start	1	One-based project number selected when the section mounts.

The enhancement supports previous/next buttons, ArrowLeft/ArrowRight, Home/End and pointer or touch dragging. It never listens for wheel input, so page scrolling remains owned by the host.

Later-added roots can be mounted with:

Code snippet omitted: it ships with the download.

Destroy one instance before removing it or replacing its markup:

Code snippet omitted: it ships with the download.

Teardown removes that root's listeners and observer, reverts only its GSAP context and restores the native gallery. Calling the mount helper on an already-mounted root does not stack behaviour.

Accessibility and integration

• The base document is a semantic horizontal CSS scroll-snap gallery. Without JavaScript or when GSAP is blocked, every project article and case-study link remains reachable.
• The enhanced stage has an accessible keyboard instruction, native buttons, visible focus and a polite status announcement. Inactive projects become inert only while the enhancement is mounted.
• prefers-reduced-motion: reduce keeps every control working and changes projects immediately.
• Touch dragging uses touch-action: pan-y, preserving vertical page scrolling. Mouse-wheel events are untouched.
• The source uses an h2 for a page section and h3 for projects. Adjust those levels to match the host document outline; the styling does not depend on tag names.
• The layout is container-aware and needs no sticky ancestor, full-width breakout, smooth-scroll library or host reset.
• For two instances on one page, copy the section root and edit each root's content normally. The implementation creates no fixed IDs and queries only inside each root.

The worked example and project results are fictional. Replace them with verified client copy before publishing.

Dependencies and image credits

• GSAP core 3.12+ is required for the enhanced carousel. This demo is pinned to GSAP 3.15.0. No GSAP plugin is used.
• There are no remote font or runtime image dependencies.
• assets/img/ contains the ready-to-use, art-directed WebP photographs. The source repository retains its stock registry and bake manifest for maintainers; those build inputs are excluded from the download.
• Longmere House: Unsplash source — Unsplash License. The licence permits commercial and non-commercial use and modification, but does not permit selling an unmodified image or compiling a competing image service.
• Mira Court: Unsplash source — Unsplash License, with the same limits noted above.
• Canal Workshop: Pexels source — Pexels License. The licence permits use and modification, including in website templates; it does not permit selling unaltered copies, implying endorsement, redistribution on stock platforms or trademark use.
• Southbank Rooms: Pexels source — Pexels License, with the same limits noted above.

Replace the four delivered .webp files directly with your own appropriately licensed photographs, or change their paths in the project articles. Update each image's dimensions, alt text and crop as described above. No repository tools or image build step are required.