Carousel dengan CSS

Adam Argyle

Dipublikasikan: 20 Maret 2025

Mulai Chrome 135, Anda dapat menggunakan fitur dari spesifikasi CSS Overflow 5 yang telah dirancang untuk menciptakan pengalaman scroll dan carousel.

Postingan ini adalah ringkasan tentang banyak pengalaman scroll dan carousel yang berbeda yang dibuat menggunakan fitur baru ini, dan tanpa JavaScript. Tonton video berikut dan nikmati hal-hal yang kini dapat dicapai.

Video ini menampilkan harmoni tombol scroll, penanda scroll, animasi yang didorong scroll, kueri scroll-state(), :has(), petak, anchor, dan banyak lagi.

Yang lebih mengesankan adalah cerita aksesibilitas.

Praktik terbaik carousel ditangani oleh browser, berkat kerja sama tim engineering dan aksesibilitas. Akan sangat sulit untuk membuat carousel yang lebih mudah diakses daripada ini.

Screenshot hierarki aksesibilitas carousel Chrome DevTools— Demo

Bertemu dengan ::scroll-button() dan ::scroll-marker()

Carousel adalah area scroll dengan maksimal dua kemampuan UI tambahan—tombol dan penanda.

Dalam versi satu fitur carousel CSS, tombol dan penanda dibuat dari CSS. Browser menempatkan elemen sebagai saudara, dengan peran yang tepat, dalam urutan tab yang tepat, dan mempertahankan statusnya. Hal ini mempermudah pengembangan carousel yang mudah diakses.

• Tombol Scroll
  Elemen <button> kemampuan scroll interaktif, stateful, dan yang disediakan browser yang membantu akses konten dan men-scroll 85% area scroll saat ditekan.

• Penanda Scroll
  Elemen <a> navigasi stateful yang disediakan browser yang membantu akses konten untuk item yang diminta di area scroll.

Bagian selanjutnya dari postingan ini menunjukkan cara membuat carousel menggunakan fitur baru ini.

Mulai dengan penggeser

Anda dapat menambahkan tombol dan penanda ke area scroll di situs Anda.

CSS berikut membuat area scroll dasar untuk digunakan pada langkah-langkah berikutnya guna menambahkan tombol dan penanda. Snap scroll tidak diperlukan untuk carousel, tetapi dalam contoh ini, snap scroll digunakan. Korsel juga berfungsi untuk penggeser vertikal dan penggeser dua arah.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

Area scroll yang ditampilkan tanpa kemampuan atau petunjuk selain konten yang terpotong.

Menambahkan tombol scroll dengan ::scroll-button()

Bergantung pada sistem operasi Anda, mungkin sudah ada tombol scroll di sekitar scrollbar. Tombol scrollbar bawaan cenderung mendorong area scroll, sedangkan tombol scroll CSS memuat 85% area scroll.

Untuk carousel yang hanya menampilkan satu item lebar penuh dalam satu waktu dengan titik snap scroll, ini akan terasa seperti jumlah item per item. Untuk daftar item yang panjang dengan lebih dari satu item yang ditampilkan sekaligus, daftar akan di-scroll hampir satu halaman penuh.

Catatan: Jika Anda ingin tombol memindahkan tepat satu item dalam satu waktu, gunakan scroll-snap-type: x mandatory yang digabungkan dengan scroll-snap-stop: always pada setiap turunan snap.

Untuk menambahkan tombol scroll dengan CSS:

1. Tambahkan seperti elemen pseudo lainnya, dengan pemilih: .carousel::scroll-button(right) untuk tombol yang akan di-scroll ke kanan.
2. Tentukan content dengan teks alternatif penggantian yang dapat diakses opsional.

Browser akan membuat tombol sungguhan, dengan konten Anda di dalamnya, sebagai saudara dari penggeser. Sekarang Anda bebas menata tombol ini, menata gayanya, atau anchor()-nya sesuai kebutuhan. CSS berikut membuat dua, satu untuk tombol scroll kiri dan satu untuk tombol scroll kanan.

.carousel {
  …

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

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

Demo

Menambahkan penanda scroll dengan ::scroll-marker()

Serupa dengan elemen thumb scrollbar, penanda scroll CSS dapat memberikan petunjuk tentang ukuran carousel sekaligus memberikan kemampuan untuk berpindah dengan cepat ke akhir atau awal. Penanda scroll CSS berbeda dengan scrollbar karena setiap penanda adalah link yang dapat mewakili item apa pun di penggeser.

Contoh perbedaan ini, pertimbangkan season serial TV. Daripada membuat penanda untuk setiap 10 episode, buat 2 penanda yang mengarah ke awal bab.

Perhatikan bahwa penanda ini bukan titik, tetapi menggunakan properti content: "Season 1" dari elemen pseudo-nya. Penanda juga dapat berupa thumbnail, yang biasanya digunakan untuk carousel galeri di situs e-commerce atau situs yang berfokus pada foto.

Penanda mirip dengan link <a> dalam halaman, tetapi memiliki beberapa fitur khusus:

1. Status ini menyertakan status :target-current untuk saat penanda terlihat atau diambil.
2. Navigasi keyboard disertakan, dan berperilaku seperti focusgroup.
3. Pengalaman pembaca layar disertakan, dan laporan seperti tablist.

Tambahkan penanda ke lokasi menarik yang bermakna di penggeser Anda dengan langkah-langkah berikut:

1. Tentukan penempatan scroll-marker-group sebagai before atau after.
2. Pilih lokasi menarik dengan pemilih .carousel .point-of-interest::scroll-marker.
3. Tentukan content dengan teks alternatif penggantian yang dapat diakses opsional; angka, teks, kosong, atau gambar.

Browser membuat semua penanda dan memasukkannya ke dalam penampung grup penanda. Contoh ini membuat penanda kosong untuk setiap <li>, untuk membuat titik penanda untuk setiap item.

.carousel {
  …

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

Demo

Elemen penampung penanda disebut ::scroll-marker-group dan dibuat sebagai saudara dari penggeser, seperti tombol scroll. Penampung ini dapat diberi gaya dan ditempatkan di mana pun Anda perlukan.

Penanda dan tombol secara bersamaan

Gabungkan keduanya dan pengalaman akan terlihat seperti carousel, tetapi memiliki manfaat berikut:

• Berfungsi dengan JavaScript dinonaktifkan.
• Tidak ada hidrasi atau ukuran lambat (mengurangi CLS).
• Siap untuk semua jenis animasi scroll dan pemicu.
• Aksesibilitas disertakan.
• Mudah digunakan dengan sentuh, mouse, dan keyboard.

Lakukan lebih sedikit, jangkau lebih banyak, lebih cepat.

Demo

Resource

Postingan ini sebagian besar menyebut fitur ini sebagai "carousel", tetapi kemampuan dan kegunaannya jauh melampaui kasus penggunaan carousel. Untuk gambaran lengkap tentang potensi fitur baru ini, coba Galeri Carousel dan lihat komponen lainnya seperti: scrollspy, tab, dan slide.

• Standar Web
  • CSS Overflow 5
  • Penjelas Carousel
  • WAI Aria Carousel
• Chrome
  • Intent to Ship
  • Galeri Carousel
  • Konfigurator Carousel

Configurator Carousel

Untuk pembelajar visual dan interaktif, coba Konfigurator Carousel.

Fitur ini menawarkan tombol, misalnya tombol scroll, dan saat diaktifkan, carousel yang ditampilkan akan segera menampilkan tombol beserta CSS terkait yang digunakan.

https://chrome.dev/carousel-configurator/

Panduan ini juga menyertakan contoh konsep yang lebih canggih yang berdekatan dengan carousel:

• interactivity
• scroll-state
• animasi yang didorong scroll
• dan kolom snap scroll

Galeri Carousel

Ruang showcase bagi pengguna yang ingin mengetahui sejauh mana Anda dapat menggunakan fitur ini, yang menjawab pertanyaan seperti "dapatkah fitur ini melakukan X?". Setiap demo didasarkan pada kasus penggunaan yang ditemukan di internet. Setiap demo menunjukkan cara mengatur tombol dan penanda ini dengan animasi yang didorong scroll, kueri scroll-state(), dan banyak lagi.

Fakta menariknya, seluruh situs tidak menggunakan JavaScript.

https://chrome.dev/carousel/

Contohnya berkisar dari yang sangat sederhana hingga yang sangat andal dan kaya fitur. Menjelajahi galeri harus memberikan inspirasi, meyakinkan, dan tentu saja dapat diperiksa untuk kode yang akan diambil. Temukan dan periksa @layer utilities untuk menemukan utilitas yang dapat membantu Anda membuat carousel.

Tugas lebih lanjut

Kami bangga dengan seberapa baik fitur ini terintegrasi dengan semua HTML dan CSS. Aksesibilitas carousel CSS sangat baik. Performa carousel CSS lebih baik daripada solusi JavaScript apa pun. Pengalaman pengguna carousel CSS bersifat alami, lancar, dan kaya. Namun, ada cara untuk meningkatkannya.

Membawa elemen Anda sendiri

Pekerjaan sudah dilakukan untuk memungkinkan Anda menambahkan komponen Anda sendiri untuk tombol scroll dan penanda. Artinya, Anda dapat menyediakan tag <a> Anda sendiri yang memiliki konten lengkap seperti ikon. Anda juga dapat menggunakan tombol multi-lapisan Anda sendiri yang dibuat dengan Tailwind.

Scroll siklik

Banyak carousel yang berputar sendiri saat sampai di akhir, seperti wahana carousel di pasar malam. Hal ini menjadi perhatian kami dan kami bermaksud untuk menyediakan solusi platform untuknya.

Semoga Anda menikmati fitur ini. Kami berharap semua pengguna web yang "JavaScript dinonaktifkan" akan mendapatkan pengalaman yang dapat di-scroll dengan baik sekarang dan semua pengurangan CLS yang akan diperoleh dari siklus proses carousel bawaan yang lebih tepat waktu.

Lebih sedikit yang harus Anda lakukan, pengalaman pengguna yang luar biasa, performa yang lebih baik.