/* ============================================================================= Bleed Slider · a pure-CSS, full-bleed product slider ----------------------------------------------------------------------------- The first slide lines up with your page grid on the LEFT, while the track runs all the way out to the RIGHT edge of the browser. As you scroll right, slides pass under the left gutter and bleed off-grid on the LEFT too. 100% CSS — built on native scroll-snap. No JavaScript required. (bleed-slider.js is optional: arrow buttons + mouse drag only.) HOW TO ALIGN IT TO YOUR GRID ---------------------------- 1. Put `.bleed-slider` as a FULL-WIDTH element (direct child of or of any wrapper that has NO horizontal padding / max-width of its own). 2. Wrap your normal page content (headings, text) in `.bs-container`. 3. Set --bs-content to your grid width. That's it — both align automatically. ========================================================================== */ :root { --bs-content: 1180px; /* width of your page's content grid */ --bs-gutter: 1.25rem; /* min breathing room from the viewport edge */ --bs-gap: 1.25rem; /* space between slides */ --bs-slide: clamp(15rem, 72vw, 22rem); /* slide width (mobile → desktop) */ --bs-radius: 18px; } /* The edge = distance from the viewport edge to where the grid content starts. Percentages here resolve against the element's full (viewport) width, so the container and the slider land on exactly the same line — no `vw`/scrollbar drift. */ .bs-container, .bleed-slider { --bs-edge: max(var(--bs-gutter), (100% - var(--bs-content)) / 2); } /* Normal page content sits inside the grid ---------------------------------- */ .bs-container { padding-inline: var(--bs-edge); } /* The slider ----------------------------------------------------------------- */ .bleed-slider { list-style: none; margin: 0; display: flex; gap: var(--bs-gap); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; /* the magic: snap, and align snapped slides to the grid edge */ scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-inline-start: var(--bs-edge); /* first slide starts on the grid; last slide ends on the grid; everything in between bleeds to the browser edges */ padding-inline: var(--bs-edge); /* room so card shadows / focus rings aren't clipped by overflow */ padding-block: 0.5rem; margin-block: -0.5rem; /* scrollbar hidden by default (still scrollable) */ scrollbar-width: none; /* Firefox */ } .bleed-slider::-webkit-scrollbar { /* Chrome / Safari / Edge */ display: none; } /* Slides --------------------------------------------------------------------- */ .bleed-slider > * { flex: 0 0 var(--bs-slide); scroll-snap-align: start; } /* Opt-IN: show a slim, on-brand scrollbar (default is hidden) --------------- */ .bleed-slider--bar { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, currentColor 25%, transparent) transparent; scroll-padding-bottom: 0.5rem; } .bleed-slider--bar::-webkit-scrollbar { display: block; height: 6px; } .bleed-slider--bar::-webkit-scrollbar-thumb { background: color-mix(in srgb, currentColor 22%, transparent); border-radius: 999px; } /* Drag-to-scroll states (added by the optional JS) -------------------------- */ .bleed-slider.is-grab { cursor: grab; } .bleed-slider.is-dragging { cursor: grabbing; scroll-snap-type: none; /* free-scroll while dragging, then re-snap */ scroll-behavior: auto; user-select: none; } /* Respect motion preferences ------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .bleed-slider { scroll-behavior: auto; } }