CSS Carousel | beragampengetahuan – Beragampengetahuan

Spesifikasi Level 5 Modul CSS Overflow mendefinisikan beberapa fitur baru yang dirancang untuk membuat pola UI korsel:

• Tombol Gulir: Browser menyediakan tombol, seperti secara harfiah <button> Elemen, gulir konten korsel saat diklik 85%.
• Tanda Gulir: Titik -titik kecil digunakan sebagai tautan jangkar, sama seperti secara harfiah <a> Gulir ke elemen proyek korsel tertentu saat diklik.

Prototipe Chrome membuat fitur -fitur ini dan merilisnya di Chrome 135. Adam Argyle memiliki juru bahasa yang hebat di blog pengembang Chrome. Kevin Powell memiliki video yang sama indahnya, dan ia mengikuti penerjemah. Artikel ini tentang saya membuat catatan dari mereka.

Pertama, beberapa penanda:

<ul class="carousel">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Pertama, mari atur mereka di grid otomatis CSS yang menampilkan item daftar dalam satu baris:

.carousel {
  display: grid;
  grid-auto-flow: column;
}

Kami dapat menyesuaikan daftar ini sehingga setiap daftar mengambil ruang tertentu, mis. 40%Dan masukkan gap Di antara mereka:

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 40%;
  gap: 2rem;
}

Ini memberi kami area gulir yang bagus untuk memajukan item daftar dengan bergerak ke kiri dan ke kanan. Kita dapat menggunakan CSS untuk menggulir kartu untuk memastikan gulir berhenti pada setiap item di tengah, daripada menggulir.

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 40%;
  gap: 2rem;

  scroll-snap-type: x mandatory;

  > li {
    scroll-snap-align: center;
  }
}

Kevin adalah .carousel Ini membuatnya lebih mudah untuk melihat apa yang sedang terjadi. Secara khusus, tambahnya border Untuk semuanya dan padding Untuk jarak internal.

Sejauh ini, yang kami miliki adalah slider super sederhana di mana kami dapat menelusuri item secara horizontal, atau klik panah kiri dan kanan di scroller.

Kami dapat menambahkan tombol gulir ke dalam campuran. Kami mendapatkan dua tombol, satu yang dapat menavigasi satu arah dan satu yang dapat menavigasi yang lain, dalam hal ini arah ini masing -masing kiri dan kanan. Seperti yang Anda harapkan, kami akan mendapatkan dua elemen semu baru untuk mengaktifkan dan menata tombol ini:

• ::scroll-button(left)
• ::scroll-button(right)

Menariknya, jika Anda membuka devtools terbuka dan memeriksa tombol gulir, mereka benar -benar datang dengan istilah logis, ::scroll-button(inline-start) Dan ::scroll-button(inline-end).

Keduanya mendukung CSS content Properti, kami gunakan untuk memasukkan label ke dalam tombol. Mari kita tetap sederhana dan tetap dengan “kiri” dan “kanan” sebagai tag kami:

.carousel::scroll-button(left) {
  content: "Left";
}
.carousel::scroll-button(right) {
  content: "Right";
}

Sekarang, kami memiliki dua tombol di atas. Klik pada mereka dan pergi 85% ke kiri atau kanan. Mengapa 85%? Saya tidak tahu. Kevin juga tidak. Inilah yang dikatakan spesifikasi. Saya yakin ada alasan bagus kami akan mendapatkan lebih banyak gudang ringan di beberapa titik.

Namun, mengklik tombol dalam contoh khusus ini akan menggulir hanya satu item daftar pada satu waktu karena kami mengaturnya untuk menggulir istirahat untuk menghentikan setiap item. Jadi, bahkan jika tombol ingin meningkatkan area pengguliran sebesar 85%, kami mengatakannya untuk menghentikan setiap item.

Ingat, ini hanya didukung di Chrome ketika ditulis:

Kita dapat memilih dua tombol di CSS, misalnya:

.carousel::scroll-button(left),
.carousel::scroll-button(right) {
  /* Styles */
}

Atau kita dapat menggunakan pemilih universal:

.carousel::scroll-button(*) {
  /* Styles */
}

Selain itu, kita bahkan dapat menggunakan posisi jangkar CSS yang lebih baru untuk mengatur tombol kiri di sisi kiri carousel dan tombol kanan di sisi kanan carousel:

.carousel {
  /* ... */
  anchor-name: --carousel; /* define the anchor */
}

.carousel::scroll-button(*) {
  position: fixed; /* set containment on the target */
  position-anchor: --carousel; /* set the anchor */
}

.carousel::scroll-button(left) {
  content: "Left";
  position-area: center left;
}
.carousel::scroll-button(right) {
  content: "Right";
  position-area: center right;
}

Perhatikan apa yang terjadi sampai ke navigasi kiri atau kanan carousel. Tombol -tombol ini dinonaktifkan untuk menunjukkan bahwa Anda telah mencapai ujung area gulir. Sangat rapi! Ini biasanya sesuatu di ranah JavaScript, tetapi kita bisa mendapatkannya secara gratis.

Mari kita berurusan dengan penanda gulir, atau titik -titik kecil yang terletak di bawah konten korsel. Masing -masing adalah satu <a> Elemen ini berlabuh pada item daftar tertentu di korsel, jadi ketika diklik, Anda menggulir langsung ke item itu.

Kami mendapatkan elemen semu baru untuk seluruh grup tag ::scroll-marker-group Kami dapat menggunakannya untuk mengatur dan menemukan wadah. Dalam hal ini, mari kita atur flexbox pada grup sehingga kita dapat menampilkannya pada baris baris tunggal dan menempatkan celah di antara mereka di tengah dimensi inline carousel:

.carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

Kami juga punya yang baru scroll-marker-group Izinkan kami menempatkan kelompok di properti (before) korsel atau di bawah (after) dia:

.carousel {
  /* ... */
  scroll-marker-group: after; /* displayed below the content */
}

Kita bisa menggunakan yang baru ::scroll-marker Pseudo-Element:

.carousel {
  /* ... */

  > li::scroll-marker {
    content: "";
    aspect-ratio: 1;
    border: 2px solid CanvasText;
    border-radius: 100%;
    width: 20px;
  }
}

Saat tanda diklik, itu menjadi item “aktif” dari bundel, yang dapat kita pilih dan gaya :target-current Level semu:

li::scroll-marker:target-current {
  background: CanvasText;
}

Luangkan waktu sejenak untuk mengklik tanda. Kemudian luangkan sedikit waktu untuk menggunakan keyboard dan terima kasih atas semua manfaat dari perulangan ketika kita mencapai akhir yang menandai dan bisa berputar. Apa yang kita dapatkan secara gratis adalah luar biasa dalam hal pengalaman dan aksesibilitas pengguna.

Saat menandai melayang atau fokus, kita dapat membentuk lebih lanjut:

li::scroll-marker:hover,
li::scroll-marker:focus-visible {
  background: LinkText;
}

Kita dapat mengatur efek gulir “animasi” scroll-behavior: smooth Pada gesper gulungan. Adam dengan cerdik menerapkannya saat preferensi gerak pengguna memungkinkan:

.carousel {
  /* ... */

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

Buuuuut tampaknya memecahkan istirahat gulir, karena tombol gulir mencoba untuk menggeser item melalui 85% dari ruang gulungan. Kevin harus bermain -main dengannya grid-auto-columns Ukuran adalah untuk memperbaikinya, tetapi menunjukkan bagaimana panutan Adam mengambil ukuran yang berbeda. Ini adalah keributan tentang hal -hal untuk memperbaikinya.

Ini hanyalah tampilan yang sangat awal pada carousel CSS. Ingat, ketika saya menulis ini, ini hanya didukung di Chrome 135+, yang murni eksperimental. Jadi, dengan pembaruan spesifikasi CSS Overflow Level 5, browser lainnya mulai membangun dukungan, jadi kunjungi, kunjungi konsepnya, dan kemudian terbuka untuk perubahan di masa depan.