Setiap plugin carousel yang pernah Anda hapus hadir dengan pengendali roda, polyfill gesek, dan opini tentang momentum. Browser sudah memiliki semuanya; CSS hanya perlu menyebutkan di mana scroller berada, yang merupakan penggunaan platform yang sangat gacor.

.gallery {
  display: grid;
  grid-auto-flow: column;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.gallery > * { scroll-snap-align: center; }

Pilih perataannya

  1. start menjepret setiap kartu tepat di tepi depan galeri, pilihan yang tepat untuk lebar kartu yang seragam dan kemajuan membaca yang terlihat.
  2. tengah menjadikan kartu istirahat sebagai jangkar visual dan menangani kartu lebih lebar dari area pandang dengan lebih anggun.
  3. wajib memaksa posisi istirahat setelah setiap gerakan, tepat untuk deck tetap; kedekatan hanya menawarkan satu hal, yang lebih ramah terhadap konten dengan lebar campuran.

Apa yang diberikan browser kepada Anda

Momentum, gesekan sentuh, dan inersia trackpad berasal dari overflow-x itu sendiri. Pengguna keyboard menjangkau setiap kartu dengan tab, dan penggulung bergerak agar fokus tetap terlihat. scroll-padding pada wadah menyediakan ruang pada titik jepret, sehingga header tempel tidak akan menelan piksel teratas kartu istirahat.

Dua pengaturan membawa polesan: scroll-snap-stop: selalu menghentikan gerakan cepat dari melewati tiga produk ke halaman empat, dan blok gerakan yang lebih disukai dapat mengendurkan dek wajib ke kedekatan. Korsel pendek, yang seluruhnya disusun dari deklarasi yang dapat Anda bacakan kepada desainer.