Karuzele z użyciem CSS

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Adam Argyle

Data publikacji: 20 marca 2025 r.

Od wersji 135 przeglądarki Chrome możesz korzystać z funkcji określonych w 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 ułatwień dostępu.

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

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 są stanowe i interaktywne, ułatwiają dostęp do treści i przewijają 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 dla żą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;
  }
}

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 – przesuwają obszar przewijania o 85%.

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. Możesz teraz rozmieścić te przyciski, nadać im styl lub anchor() według potrzeb. 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;
  }
}

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.

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 focusgroup.
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 przechowuje je w kontenerze grupy znaczników. W tym przykładzie dla każdego elementu <li> tworzony jest pusty znacznik, aby można było wyświetlić punkt znacznika dla każdego elementu.

.carousel {
  …

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

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 stosowania w różnych animacjach i wyzwalaczach przewijania.
• Dostępność jest wliczona w cenę.
• Dotykowa, mysz i klawiatura.

Zwiększ zasięg, osiągaj lepsze wyniki i zwiększaj wydajność

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.

• Standardy internetowe
  • CSS Overflow 5
  • Opis karuzeli
  • WAI Aria Carousel
• Chrome
  • Intencja dostawy
  • Galeria obrotowa
  • Konfigurator karuzeli

Konfigurator karuzeli

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

Zawiera przełączniki, np. przyciski przewijania. Gdy włączysz tę opcję, wyświetlany karuzelę od razu pojawią się przyciski i użyty zostanie powiązany z nimi kod CSS.

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

• interactivity
• scroll-state
• animacja sterowana przez przewijanie
• i przyciąganie kolumn do przewijania.

Galeria obrotowa

Pokaż swój pokój – dla tych, którzy chcą się dowiedzieć, jak daleko można posunąć się w korzystaniu z tych funkcji, i odpowiedzi na pytania w rodzaju „Czy można to zrobić?”. 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.

Przykłady są bardzo zróżnicowane: od bardzo prostych do bardzo zaawansowanych i bogatych w funkcje. Przeglądanie galerii powinno być inspirujące, przyjemne i oczywiście umożliwiające przeglądanie kodu. Znajdź i przejrzyj @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ć.

Dodaj własne elementy

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ą rozbudowane treści, takie jak ikony. Możesz też użyć własnych przycisków wielowarstwowych 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 dzięki lepszemu dopasowaniu czasu trwania do cyklu życia wbudowanego karuzeli.

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