BRAND Nike 2026 · Recipe: filmstrip-carousel

HEADER brand: Nike; design_date: 2026-09; kind: component; used_in: Page: home S2, S5, S10, S16, S19 (image filmstrips and product rails); Page: product-detail S2 (You Might Also Like) evidence: measured on https://www.nike.com (United States, English) 2026-09-25 from the home stylesheet (d33b5015547e6c8e.css) and computed styles unless marked LOOK A single row of images that starts at the page's 48px margin and runs off the right edge of the viewport, so the last visible card is cut. Cards are square or tall portrait photos with no radius, no shadow and a short caption below. Product rails put cut-out product shots on light grey squares with a section title on the left and two round grey arrow buttons on the right above the row. There are no dots, no autoplay and no visible scrollbar at rest; the row scrolls with the trackpad, touch swipe or the arrows. STRUCTURE section (grid, class fluid: full-bleed, no side margin) optional section headline row: title left (H2 24px/28.8px Helvetica Now Display Medium 500 #111111), arrows right; margin-bottom 24px; row padding 0 48px arrow group: prev and next buttons 48x48, 12px apart (x 1293 and 1353 at 1440, right edge at 1401), top of the row ul.slider: display flex, overflow-x auto, scroll-snap-type x mandatory, padding 0 0 30px 48px (30px bottom leaves room for the hover scrollbar), no gap property: each li has margin-right 12px; without a headline row the images start ~26px below the top of the section (so 42px below the module above with its 16px margin) li.slide: scroll-snap-align start; figure (min-width 300px) with image link overlay covering the whole card image: object-fit cover, no radius, bg #F5F5F5 while loading (opacity 0 -> 1, 500ms, 300ms delay) caption (optional): 16px/24px Helvetica Now Text 400 #111111 (or 500 for "Shop X" labels), margin-top 8px, max 2-3 lines KEY PARAMETERS editorial filmstrip (3 slides visible): slide width 435px at 1440 ((1329 - 2*12) / 3), 12px gap; images 435x435 (square, S2) or 435x583 (3:4 portrait, S5) or 435x566 (S16); left padding 48px; the row extends to the viewport edge, so with exactly 3 slides nothing is cut and no arrows show product rail (4.5 slides visible): slide 312px incl. 12px padding (image 300x300 on #F5F5F5 product-shot background), first slide starts at the page margin; arrows shown arrows: 48px circles; enabled: icon #111111 on #E5E5E5 (est); disabled (at start or end): icon #9E9EA0 on #F5F5F5 (est); icon chevron 24px; hidden below 600px scrollbar: transparent at rest; on hover of the section scrollbar-color #707072 transparent; WebKit thumb 14px high track with 4px transparent borders top and bottom, radius 7px (so a 6px bar) mobile (390): left padding 24px; editorial slides 300px wide (min-width), 8px (est 12px) gap, so 1.2 slides visible; product rail slides ~300px; no arrows, swipe only MOTION arrow click: scrolls the row by one visible page of slides with smooth scrolling (inf); scroll-snap aligns the first visible slide to the 48px padding drag and swipe: native momentum scrolling with mandatory snapping scrollbar reveal: color transition .3s on hover of the section images: fade in opacity 500ms after 300ms delay when loaded no autoplay, no parallax, no scale on hover STATES hover: no card effect (no zoom, no lift); cursor pointer; section shows the thin grey scrollbar focus: the card link overlay shows border 1px #1151FF on focus-visible; arrow buttons 0 0 0 2px #1151FF touch: arrows removed below 600px; swipe with snap reduced motion: smooth scrolling off (inf) loading: grey #F5F5F5 squares HOW TO BUILD A flex ul with overflow-x auto and scroll-snap-type x mandatory, padding-left equal to the page margin (48 / 24px) and no right padding so it bleeds off the right edge; set scroll-padding-left to the same margin so snapping keeps the first card at the margin (without it the first card snaps to the viewport edge on load, as seen in the rebuild check). Each li has a fixed width (one third of the content width for editorial rails, 300px for product rails) and margin-right 12px. Arrow buttons call scrollBy with the rail's client width and are disabled at scrollLeft 0 and at the end. Hide the scrollbar with scrollbar-color transparent and reveal it on hover. PITFALLS Do not center the rail or add right padding; the cut last card is the look. Missing scroll-padding-left makes the first card stick to the left edge of the screen. No radius and no captions on top of images in filmstrips (text sits below). Arrows go above the row on the right, never over the images. Do not add pagination dots. SCREENSHOTS Key frames are in the Page: home screenshots (nike_2026_home_d1440_full.jpg: S2 three square filmstrip cards, S10 "Rep Your Team" product rail with arrows; nike_2026_home_m390_full.jpg: mobile rails cut at the right edge) and in Page: product-detail (You Might Also Like).