Skip to main content
Normal UI

Organism Content <ScrollCarousel>

Live example

Shop highlights

  • Autumn sale

    Up to 30% off home and kitchen until 15 October.

  • Batik runners

    Hand-printed in Pekalongan, six patterns.

  • Free returns

    Every order, any reason, within 30 days.

  • Same-day delivery

    In Bandung and Jakarta, ordered before 12:00.

Scroll carousel

A carousel made with CSS only: a horizontally scrolling, snapping list. In browsers with the new CSS overflow features, ::scroll-button() adds Previous and Next buttons and ::scroll-marker adds numbered markers, with :target-current marking the one in view.

Consumer provides: a heading and a <ul class="pd-scroller"> of items.

  • Everywhere, it is a plain list people can scroll by swipe, trackpad or Shift+wheel, and Tab moves into each item’s links.
  • Where supported, the browser generates real buttons (disabled at each end, drawn dashed) and a group of numbered markers 24px square; the current one is inverted.
  • Nothing moves on its own.
  • Support: ::scroll-button() and ::scroll-marker are Chromium only (Chrome 135+) and still experimental; screen-reader support for the generated controls is still settling. For a carousel that must behave identically everywhere, use Carousel.

React

import { ScrollCarousel } from '@imsus/normal-ui-react';

<ScrollCarousel label="Shop highlights" items={[{ title: 'Autumn sale', body: '…' }]} />