Recently Viewed Carousel — Product Strip HTML CSS JS

The "Recently viewed" strip — a horizontal row of product cards you can scroll or page through — is on nearly every e-commerce site, because reminding shoppers of items they looked at is one of the highest-converting forms of merchandising. This snippet builds that carousel in plain HTML, CSS, and vanilla JavaScript: smooth scroll-snap, arrow buttons that page by a screenful and disable at the edges, save hearts, and a clean hidden scrollbar.

Native scroll-snap, not a JS animation loop

The track is a flex row with overflow-x: auto and scroll-snap-type: x mandatory, so items snap neatly into place as the user swipes, drags, or pages — using the browser's native, momentum-aware scrolling rather than a JavaScript animation loop. Each card has scroll-snap-align: start, so scrolling always lands on a card edge, never mid-card. This is the right foundation: native scroll is buttery on touch devices, respects the OS's scroll physics, and needs no library, while the arrows are a desktop convenience layered on top.

Arrows that page by a screenful and know the edges

The previous/next arrows scroll by a computed "page" — pageWidth() measures how many whole cards fit in the visible track and scrolls by that many, so a click reveals a fresh set rather than nudging one card. Critically, the arrows disable at the boundaries: updateArrows() checks scrollLeft against 0 and against the maximum scroll, greying out the left arrow at the start and the right arrow at the end. This edge-awareness — recomputed on every scroll and resize — is what makes the paging feel finished; an arrow that does nothing because you're already at the end is a common rough edge this avoids.

Hidden scrollbar, kept scrollable

The scrollbar is hidden (scrollbar-width: none and the WebKit pseudo-element) for a clean look, but the track stays fully scrollable by touch, trackpad, and the arrows — hiding the bar is purely cosmetic and never removes the scrolling itself. This gives the polished, app-like appearance of a custom carousel while keeping all the native scroll behavior.

Product cards with save and click

Each card shows the product image (a gradient placeholder here, ready for a real photo), a two-line clamped name, and a price with an optional struck-through original. A heart button in the corner toggles a saved state, with its click stopped from also triggering the card's own click (which would open the product) — the stopPropagation that keeps "save" and "open" as distinct actions on overlapping targets. The cards lift slightly on hover for tactility.

Data-driven and drop-in

The whole strip renders from a PRODUCTS array, so it's populated from your recently-viewed data (typically read from localStorage or your backend, in view order). Swap the emoji/gradient images for real product photos and wire the card click to your product route and the heart to your wishlist. Because it's compact and self-contained, the same component works for "Recommended," "On sale," or any horizontal product row, not just recently viewed.