Karuzele z użyciem CSS

Adam Argyle

Data publikacji: 20 marca 2025 r.

Od wersji 135 przeglądarki Chrome możesz korzystać z funkcji ze specyfikacji CSS Overflow 5, które zostały zaprojektowane z myślą o przewijaniu i karuzeli.

W tym poście omawiamy różne sposoby przewijania i używania karuzeli, które wykorzystują te nowe funkcje i nie wymagają JavaScriptu. Obejrzyj ten film i zobacz, co możesz teraz osiągnąć.

Film pokazuje harmonię przycisków przewijania, znaczników przewijania, animacji napędzanej przez przewijanie, zapytań scroll-state(), :has(), siatki, kotwic i wiele innych.

Jeszcze bardziej imponująca jest historia dotycząca ułatwień dostępu.

Sprawdzone metody dotyczące karuzeli są obsługiwane przez przeglądarkę dzięki współpracy zespołów ds. rozwoju i dostępności. Trudno byłoby stworzyć bardziej czytelny autoprezenter niż ten.

Elementy karuzeli są wyświetlane w widoku drzewa ułatwień dostępu, w którym wyraźnie zaznaczone są przyciski i elementy kart, aby umożliwić podgląd tego, co czytnik ekranu zobaczy w karuzeli.
Zrzut ekranu z karuzelki w Narzędziach deweloperskich Chrome – drzewo ułatwień dostępu – Demo

Poznaj ::scroll-button() i ::scroll-marker()

Karuzela to obszar przewijania z maksymalnie 2 dodatkami interfejsu użytkownika: przyciskami i znacznikami.

W pierwszej wersji funkcji karuzeli CSS przyciski i znaczniki są tworzone z CSS. Przeglądarka umieszcza elementy jako elementy siostrzane z odpowiednimi rolami w odpowiedniej kolejności na kartach i zachowuje ich stan. Ułatwia to tworzenie karuzeli z dostępnością.

  • Przyciski przewijania
    Elementy <button>przewijania oferowane przez przeglądarkę, które umożliwiają dostęp do treści i przewijanie 85% obszaru przewijania po naciśnięciu.

  • Markery przewijania
    Elementy nawigacji <a> z pamięcią stanu, które ułatwiają dostęp do treści żądanego elementu w obszarze przewijania.

W dalszej części tego artykułu pokazujemy, jak utworzyć karuzel, korzystając z tych nowych funkcji.

Zacznij od scrollera

Przyciski i oznaczenia możesz dodawać do dowolnej przewijanej części witryny.

Ten kod CSS tworzy podstawową obszar przewijania, który będzie używany w kolejnych krokach do dodawania przycisków i znaczników. W przypadku karuzeli nie jest wymagane blokowanie przewijania, ale w tym przykładzie jest ono używane. Karuzele działają też w przypadku pasków przewijania w pionie i dwukierunkowych.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}
Obszar przewijania bez możliwości i wskazówek innych niż treści, które są przycięte.

Dodawanie przycisków przewijania za pomocą ::scroll-button()

W zależności od systemu operacyjnego przy suwakach mogą już być widoczne przyciski przewijania. Wbudowane przyciski paska przewijania zazwyczaj przesuwają obszar przewijania, a przyciski CSS – 85% obszaru przewijania.

W przypadku karuzeli, które wyświetlają tylko jeden element o pełnej szerokości z punktami zablokowania przewijania, będzie to wyglądać jak wyświetlanie poszczególnych elementów. W przypadku długich list elementów, na których widocznych jest więcej niż 1 element, przewija się prawie całą stronę.

Aby dodać przyciski przewijania za pomocą CSS:

  1. Dodaj je jak inne pseudoelementy, za pomocą selektora: .carousel::scroll-button(right) dla przycisku przewijania w prawo.
  2. Podaj content z opcjonalnym tekstem alternatywnym ułatwiającym dostępność.

Przeglądarka utworzy prawdziwe przyciski z Twoimi treściami jako elementy siostrzane suwaka. Teraz możesz dowolnie rozmieścić te przyciski, nadać im styl lub anchor(). Ten kod CSS tworzy 2 przyciski: jeden do przewijania w lewo, a drugi do przewijania w prawo.

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*)::focus-visible {
    outline-offset: 5px;
  }
}
Demo

Dodawanie znaczników przewijania za pomocą ::scroll-marker()

Podobnie jak suwak, znaczniki przewijania CSS mogą wskazywać rozmiar karuzeli, a także umożliwiać szybkie przewijanie do początku lub końca. Marker przewijania CSS różni się od paska przewijania, ponieważ każdy marker to link, który może reprezentować dowolny element w scrollerze.

Przykładem takiego rozróżnienia są sezony serialu telewizyjnego. Zamiast tworzyć znacznik dla każdego z 10 odcinków, utwórz 2 znaczniki, które odsyłają do początku rozdziału.

Wyświetla się pozioma lista odcinków serialu, zaczynająca się od 1 odcinka 2 sezonu. Powyżej znajdują się 2 tytuły list: Sezon 1 i Sezon 2. Każdy z nich ma strzałkę wskazującą, że są to wygenerowane znaczniki przewijania.

Zwróć uwagę, że te znaczniki to nie kropki, lecz właściwości content: "Season 1" pseudoelementu. Markerami mogą być też miniatury, które są często używane w galeriach w witrynach e-commerce lub witrynach poświęconych zdjęciom.

znaczniki są podobne do linków <a> na stronie, ale mają kilka specjalnych funkcji:

  1. Obejmują one stan :target-current, gdy znacznik jest widoczny lub przypięty.
  2. Dostępna jest nawigacja za pomocą klawiatury, która działa jak grupa fokusowa.
  3. Dostępna jest obsługa czytników ekranu i raporty w postaci listy kart.

Aby dodać znaczniki do istotnych punktów zainteresowania w przewijarce, wykonaj te czynności:

  1. Zdefiniuj miejsce docelowe elementu scroll-marker-group jako before lub after.
  2. Wybierz punkty zainteresowania za pomocą selektora .carousel .point-of-interest::scroll-marker.
  3. Określ content z opcjonalnym dostępnym tekstem alternatywnym; numery, tekst, pusty tekst lub obraz.

Przeglądarka tworzy wszystkie znaczniki i umieszcza je w kontenerze grupy znaczników. W tym przykładzie dla każdego elementu <li> tworzony jest pusty znacznik, aby zaznaczyć każdy element.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
    
    &:target-current {
      background: var(--accent);
    }
  }
}
Demo

Element zawierający znaczniki nazywa się ::scroll-marker-group i jest tworzony jako element nadrzędny względem scrollera, tak jak przyciski przewijania. Ten kontener można spersonalizować i umieścić w dowolnym miejscu.

znaczniki i przyciski jednocześnie

Połączenie tych dwóch elementów daje efekt podobny do karuzeli, ale z tymi korzyściami:

  • Działa z wyłączonym JavaScriptem.
  • Brak stosowania technik hydration i lazy sizing (zmniejsz CLS).
  • Gotowe do obsługi wszystkich rodzajów animacji i wyzwalania podczas przewijania.
  • Dostępność jest wliczona w cenę.
  • Dotykowa, mysz i klawiatura.

Zwiększ zasięg, osiągaj więcej, szybciej.

Demo

Zasoby

W tym poście te funkcje są głównie określane jako „karuzela”, ale ich możliwości i przydatność wykraczają daleko poza przypadki użycia karuzeli. Aby w pełni wykorzystać możliwości tych nowych funkcji, wypróbuj galerię obrotową i inne komponenty, takie jak scrollspy, karty i slajdy.

Osoby uczące się w sposób wizualny i interakcyjny mogą skorzystać z konfiguratora karuzeli.

Zawiera przełączniki, np. przyciski przewijania, a po włączeniu wyświetlany karuzelę natychmiast pojawiają się przyciski i używane jest powiązane z nimi formatowanie CSS.

Zrzut ekranu strony konfiguratora, na którym widać fragment kodu HTML prostej listy. Pod HTML znajdują się 4 przełączniki: przyciski przewijania, nawigacja kropkami, automatyczne strony i inert. Pod przełącznikami znajduje się lista kart, na których można dodawać oferty przełączników.
https://chrome.dev/carousel-configurator/

Zawiera on też przykłady bardziej zaawansowanych koncepcji, które są związane z karuzelą:

Pokażę Ci, jak to działa – dla tych, którzy chcą się dowiedzieć, jak daleko można posunąć te funkcje, i odpowiedzieć na pytania w rodzaju „Czy to może zrobić X?”. Każdy pokaz jest oparty na zastosowaniu, które można znaleźć w internecie. Każde z nich pokazuje, jak sterować tymi przyciskami i znacznikami za pomocą animacji sterowanej przez przewijanie, zapytań scroll-state() i wielu innych metod.

Ciekawostka: cała witryna jest pozbawiona kodu JavaScript.

Zrzut ekranu strony docelowej z galerią obrotową. Zawiera nagłówek powitalny, informacje o witrynie i listę przykładów karuzeli w postaci linków.
https://chrome.dev/carousel/

Przykłady są bardzo zróżnicowane: od bardzo prostych do bardzo zaawansowanych i bogatych w funkcje. Przeglądanie galerii powinno być inspirujące i budować zaufanie, a także oczywiście umożliwiać przeglądanie kodu. Znajdź i sprawdź @layer utilities, aby znaleźć narzędzia, które pomogą Ci tworzyć karuzele.

dalsze prace,

Jesteśmy dumni z tego, jak dobrze te funkcje integrują się z kodem HTML i CSS. Dostępność karuzeli CSS jest najwyższej jakości. Karuzelę CSS cechuje większa skuteczność niż jakiekolwiek rozwiązanie oparte na JavaScript. Użytkownicy mogą korzystać z karuzeli CSS w sposób naturalny, płynny i bogaty. Można jednak coś poprawić.

Dodawanie własnych elementów

Trwają już prace nad umożliwieniem dodawania własnych komponentów do przycisków przewijania i znaczników. Oznacza to, że możesz przesłać własne tagi <a>, które zawierają rozszerzone treści, np. ikony. Możesz też użyć własnych wielowarstwowych przycisków utworzonych za pomocą Tailwind.

Przewijanie cykliczne

Wiele karuzeli kończy się pętlą, tak jak na przykład karuzela na festynie. Rozważamy to i zamierzamy wprowadzić rozwiązanie na platformie.

Mamy nadzieję, że spodoba Ci się ta funkcja. Z niecierpliwością czekamy na użytkowników, którzy mają wyłączony JavaScript, aby mogli teraz korzystać z przyjemnego interfejsu z możliwością przewijania. Dzięki temu uda się zmniejszyć CLS, który jest związany z lepszym czasem trwania wbudowanego karuzela.

Mniej pracy, lepsze wrażenia użytkowników i większa skuteczność.