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 membuat pengalaman scroll dan carousel.

Postingan ini adalah ringkasan berbagai pengalaman scroll dan carousel yang dibuat menggunakan fitur baru ini, dan tanpa JavaScript. Tonton video berikut dan bersiaplah untuk pencapaian yang kini dapat diraih.

Yang ditampilkan dalam video adalah keselarasan tombol scroll, penanda scroll, animasi yang digerakkan scroll, kueri scroll-state(), :has(), petak, anchor, dan banyak lagi.

Yang lebih mengesankan adalah kisah aksesibilitasnya.

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

Perkenalkan ::scroll-button() dan ::scroll-marker()

Carousel adalah area scroll dengan hingga dua afordans UI tambahan—tombol dan penanda.

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

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

• Penanda Scroll
  Elemen navigasi stateful yang disediakan browser <a> 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 scroller

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

CSS berikut membuat area scroll dasar untuk digunakan pada langkah-langkah selanjutnya guna menambahkan tombol dan penanda. Penyelarasan scroll tidak diperlukan untuk carousel, tetapi dalam contoh ini, penyelarasan scroll digunakan. Korsel juga berfungsi untuk scroller vertikal dan scroller dua arah.

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

Menambahkan tombol scroll dengan ::scroll-button()

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

Untuk carousel yang hanya menampilkan satu item lebar penuh dalam satu waktu dengan titik ke-scroll-an, ini akan terasa seperti jumlah item demi item. Untuk daftar item panjang yang lebih dari satu item terlihat dalam satu waktu, daftar akan men-scroll hampir satu halaman penuh.

Untuk menambahkan tombol scroll dengan CSS:

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

Browser akan membuat tombol asli, dengan konten Anda di dalamnya, sebagai elemen selevel dengan scroller. Sekarang Anda bebas mengatur tata letak tombol ini, menata gayanya, atau anchor() sesuai kebutuhan. CSS berikut membuat dua tombol, 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;
  }
}

Menambahkan penanda scroll dengan ::scroll-marker()

Mirip dengan elemen thumb scrollbar, penanda scroll CSS dapat mengisyaratkan ukuran carousel sekaligus memberikan kemampuan untuk bergerak cepat ke akhir atau awal. Penanda scroll CSS berbeda dengan scrollbar karena setiap penanda adalah link yang dapat merepresentasikan item apa pun di scroller.

Sebagai contoh perbedaan ini, pertimbangkan musim serial TV. Daripada membuat penanda untuk setiap 10 episode, buat 2 penanda yang menuju ke awal bab.

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

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

1. Hal ini mencakup status :target-current saat penanda terlihat atau disematkan.
2. Navigasi keyboard disertakan, dan berperilaku seperti focusgroup.
3. Pengalaman pembaca layar disertakan, dan melaporkan seperti tablist.

Tambahkan penanda ke lokasi menarik yang relevan di scroller 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 menempatkannya ke dalam penampung grup penanda. Contoh ini membuat penanda kosong untuk setiap <li>, guna membuat titik penanda untuk setiap item.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

Elemen penampung penanda disebut ::scroll-marker-group dan dibuat sebagai elemen turunan dari scroller, seperti tombol scroll. Penampung ini dapat diberi gaya dan ditempatkan di mana pun Anda inginkan.

Penanda dan tombol secara bersamaan

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

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

Lakukan lebih sedikit, jangkau lebih banyak, lebih cepat.

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
  • Penjelasan Carousel
  • WAI Aria Carousel
• Chrome
  • Maksud untuk Mengirim
  • Galeri Carousel
  • Konfigurator Carousel

Konfigurator Carousel

Untuk pelajar visual dan interaktif, coba Konfigurasi Carousel.

Fitur ini menawarkan tombol, misalnya tombol scroll, dan saat diaktifkan, carousel yang ditampilkan akan langsung memiliki tombol yang muncul beserta CSS terkait yang digunakan.

Bagian ini juga mencakup contoh konsep yang lebih canggih yang berdekatan dengan carousel:

• interactivity
• scroll-state
• animasi yang digerakkan scroll
• dan kolom ke-scroll otomatis

Galeri Carousel

Ruang demo bagi mereka yang ingin tahu seberapa jauh Anda dapat memanfaatkan fitur ini, menjawab pertanyaan seperti "bisakah 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 digerakkan scroll, kueri scroll-state(), dan banyak lagi.

Fakta menariknya, seluruh situs ini tidak menggunakan JavaScript.

Contohnya berkisar dari yang sangat sederhana hingga yang sangat canggih dan kaya fitur. Menjelajahi galeri harus menginspirasi, meyakinkan, dan tentu saja dapat diperiksa kodenya untuk diambil. Temukan dan periksa @layer utilities untuk mengetahui utilitas yang dapat membantu Anda membuat carousel.

Tugas lebih lanjut

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

Membawa elemen Anda sendiri

Kami sedang berupaya agar Anda dapat menambahkan komponen sendiri untuk tombol dan penanda scroll. Artinya, Anda dapat menyediakan tag <a> sendiri yang memiliki konten multimedia seperti ikon. Anda juga dapat menggunakan tombol multi-layer sendiri yang dibuat dengan Tailwind.

Scroll siklik

Banyak carousel berputar sendiri saat mencapai akhir, seperti carousel di pasar malam. Kami sudah mengetahuinya dan berencana untuk menyediakan solusi platform terkait hal ini.

Semoga Anda menikmati fitur ini. Kami menantikan semua pengguna web yang "JavaScript dinonaktifkan" yang kini akan mendapatkan pengalaman scroll yang lancar dan semua pengurangan CLS yang diperoleh dari siklus proses carousel bawaan yang waktunya lebih tepat.

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