liquiddesign

Wzorzec 13

Karuzela na scroll-snap

Karuzele z bibliotek walczą z przeglądarką o gesty i dostępność. Natywny overflow z scroll-snap daje przyciąganie do kart, działa z dotykiem, klawiaturą i czytnikami, a maski na krawędziach podpowiadają, że dalej jest więcej.

Realizacje studia na poziomym pasie

Przeciągnij pas, przewiń kółkiem albo użyj strzałek. Przyciąganie do kart robi scroll-snap, maski na krawędziach podpowiadają ciąg dalszy.

  • Atlas Rebranding

    Branding

  • Panel Heliotrop

    Aplikacja

  • Sklep Novak Studio

    E-commerce

  • Portfolio Wrzos

    Strona

  • Atlas Akademia

    Platforma

  • Novak Magazyn

    Treści

Reguły

  • Przewijanie jest natywne: overflow-x auto plus scroll-snap-type x mandatory.
  • Karty deklarują scroll-snap-align i szerokość w jednostkach względnych.
  • scroll-padding dosuwa karty do krawędzi kontenera, nie ekranu.
  • Pas działa bez JavaScript, skrypt może najwyżej dodać strzałki jako ulepszenie.

Wzorzec w kodzie

Cały mechanizm karuzeli to trzy właściwości przewijania
<ul className="flex snap-x snap-mandatory gap-3 overflow-x-auto scroll-px-4 px-4">
  {cards.map((card) => (
    <li key={card.id} className="w-64 shrink-0 snap-start">
      <Card {...card} />
    </li>
  ))}
</ul>
Maska na krawędziach zapowiada ciąg dalszy
.carousel {
  mask-image: linear-gradient(
    90deg,
    transparent,
    black 1.5rem,
    black calc(100% - 1.5rem),
    transparent
  );
  scrollbar-width: none;
}