---
title: "BRAND Nike 2026 · Recipe: filmstrip-carousel"
url: https://memocore.ai/memos/6ab64810af51aac421da88c7
project: "Brand Styles"
tags: "brand-nike"
updated_at: "2026-09-25T10:21:14.130Z"
---

# 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).