Carousel Mobile Pakai CSS Scroll Snap, Tanpa JavaScript

Buka section Projects and Services di HP, yang keliatan cuma kartu pertama. Saya geser ke bawah, kartu kedua. Geser lagi, ketiga. Empat. Lima. Section ini kepanjangan banget buat yang cuma mau lihat sekilas apa yang saya kerjakan, dan buat pengunjung yang scroll cepat, kemungkinan besar mereka cuma lihat satu kartu doang terus lewat.

Masalahnya bukan di kontennya. Lima kartu layanan itu valid semua. Tapi kalau ditumpuk vertikal di layar kecil, jadinya scroll tak berujung yang bikin orang males lanjut.

Perlu konteks: perombakan ini gilirannya sama section kartu lima layanan yang saya tulis kemarin. Versi desktop-nya udah beres, grid tiga kolom rapi. Yang kelewat baru sadar pas saya buka dari HP sebelum tidur: lima kartu vertikal di layar 6 inci itu panjangnya kayak baca terms of service. Scrollnya keliatan gagal berhenti.

Jadi saya coba carousel.

Dugaan awal yang salah

Saya sempat nolak ide carousel mentah-mentah. Alasannya klise banget: baca di mana-mana kalau carousel itu pola jahat di UX. Orang nggak klik, orang lewat, orang cuma lihat frame pertama.

Dan memang itu benar. Riset dari Nielsen Norman Group konfirmasi kalau user sering langsung scroll lewat carousel dan melewatkan semua isi kecuali frame pertama [1]. Satu gambar bisa bikin orang salah paham isi keseluruhan. Jadi saya sempat mikir: yah, berarti nggak boleh pakai carousel.

Tapi masalah saya bukan "carousel itu jahat." Masalah saya adalah "section ini kepanjangan di mobile." Dan ternyata penyebab carousel itu menyebalkan punya pola yang spesifik.

Apa yang ternyata bikin carousel itu jelek

Kebanyakan carousel yang bikin orang kesal itu punya dua masalah: auto-rotate dan konten yang cuma satu frame terlihat.

Auto-rotate bikin user nggak pernah bisa fokus baca isinya. Mereka baru baca paragraf, eh sudah geser sendiri. Ini frustasi banget. Yang kedua, kalau kartu berikutnya nggak keliatan sama sekali, user nggak tahu ada lagi di sana. Mereka pikir itu doang isinya.

Carousel yang saya butuhkan justru kebalikannya. Manual. Nggak ada skrip. Dan kartu berikutnya keliatan separuh di pinggir layar, supaya jelas bahwa masih ada lanjutan.

Implementasinya pakai CSS scroll snap. Nggak perlu JavaScript sama sekali.

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
}

.carousel > * {
  scroll-snap-align: start;
  min-width: 80vw;
}

MDN glossary define scroll snap sebagai mekanisme yang bikin konten menempel ke posisi tertentu pas scroll selesai, bukan berhenti di titik sembarangan [2]. Properti scroll-snap-type dipasang di scroll container, nentuin arah dan kekakuan snap-nya [3]. Dan yang penting: statusnya Baseline widely available sejak April 2022. Browser support udah solid, nggak perlu polyfill.

Kartu pertama tampil penuh, kartu kedua muncul separuh di kanan. User geser, snap. Kartu kedua penuh, kartu ketiga separuh. Begitu seterusnya. Intuisinya sama kayak swipe di app mana aja.

Kenapa ini masuk akal

Saya pilih pendekatan ini karena itu solusi paling malas yang bisa saya ambil. Serius, ini lebih sedikit kode ketimbang nge-list vertikal dan nambah logic buat limit height di mobile.

Carousel manual tanpa auto-rotate menangani dua masalah utama yang bikin carousel itu jelek [1]: user punya kontrol penuh atas kapan berhenti dan kapan lanjut, dan preview kartu berikutnya kasih konteks bahwa masih ada konten lain. CSS scroll snap bikin pengalaman swipe-nya terasa natural tanpa harus nulis satu baris JavaScript pun.

Dan ya, saya tahu tetap ada trade-off. Pengunjung yang bener-bener nggak mau interaksi apa pun tetap cuma lihat kartu pertama. Tapi itu juga terjadi kalau saya taruh lima kartu secara vertikal dan mereka scroll tanpa membaca. Bedanya, versi carousel jauh lebih hemat ruang dan bikin section ini nggak menguasai seluruh halaman.

Jadi saya pakai carousel. Di mobile aja.

Sumber