Buat carousel CSS canggih tanpa JavaScript sama sekali.

Beranda » Ular sanca » Buat carousel CSS canggih tanpa JavaScript sama sekali.

Membangun carousel hanya dengan menggunakan CSS modern bukanlah lagi sekadar mimpi.—ini adalah opsi yang sangat nyata dan siap produksi yang seringkali dapat mengungguli pustaka slider JavaScript klasik. Berkat fitur-fitur seperti penguncian gulir, animasi berbasis gulir, pseudo-elemen carousel eksperimental, dan primitif aksesibilitas yang kuat.Anda dapat mengirimkan carousel yang ringan dan tahan lama, namun tetap terasa halus, interaktif, dan berkualitas.

Jika Anda bosan mengunduh bundel JavaScript berukuran 50KB hanya untuk menampilkan beberapa slidePanduan ini akan memandu Anda melalui apa yang dapat dilakukan CSS saat ini untuk Anda. Kami akan menguraikan konsep-konsep kunci di balik carousel berbasis CSS saja, cara menghubungkannya dengan scroll-snap, dan kapan harus menggunakan fitur-fitur baru. ::scroll-button() ke ::scroll-marker() pseudo-elemen, dan bagaimana cara menyisipkan perilaku putar otomatis atau melingkar sambil tetap memperlakukan aksesibilitas dan kinerja sebagai prioritas utama.

Mengapa carousel berbasis CSS saja akhirnya menjadi pilihan yang serius?

Selama bertahun-tahun, "carousel" hampir menjadi sinonim untuk "plugin JavaScript".Solusi seperti Swiper, Glide, atau slider buatan sendiri adalah pendekatan yang umum digunakan: solusi tersebut menangani navigasi, status, dukungan keyboard, dan gestur sentuh, tetapi dengan konsekuensi ukuran file yang lebih besar, banyak event listener di mana-mana, dan banyak manipulasi DOM.

CSS modern telah secara diam-diam menutup sebagian besar kesenjangan tersebut.Dengan properti seperti scroll-snap-type ke scroll-snap-alignAnda dapat mengubah scroller horizontal atau vertikal apa pun menjadi pengalaman halaman. Selain itu, spesifikasi CSS Overflow Level 5 memperkenalkan fitur yang dihasilkan oleh browser. tombol gulir dan penanda yang berperilaku seperti UI carousel berfitur lengkap, tetapi dideklarasikan sepenuhnya dalam CSS.

Keuntungan besarnya adalah browser, bukan kode JavaScript Anda, yang bertanggung jawab atas masalah UX inti.: fisika pengguliran, navigasi keyboard, urutan fokus, dan bahkan peran ARIA untuk kontrol carousel. Dalam banyak kasus, memang sulit untuk membangun sesuatu yang lebih mudah diakses dan berkinerja lebih baik daripada yang diberikan platform saat ini secara bawaan.

Keunggulan utama lain dari carousel CSS adalah ketahanannya.Jika JavaScript gagal dimuat, pengguna dengan skrip yang diblokir atau dinonaktifkan tetap mendapatkan serangkaian item yang dapat digulir dan berfungsi dengan sempurna. Tidak ada hidrasi, tidak ada pergeseran tata letak yang disebabkan oleh kode yang dimuat terlambat, dan jauh lebih sedikit komponen yang dapat mengalami kesalahan seiring waktu.

Komponen inti: sebuah kontainer yang dapat digulir dengan fitur Scroll Snap.

Setiap carousel yang hanya menggunakan CSS berawal dari sebuah kontainer yang dapat digulirkan biasa.Bayangkan daftar slide sederhana yang dapat digulir secara horizontal. Dari situ, Anda menambahkan fitur penguncian gulir (scroll snapping) sehingga tampilan (viewport) secara otomatis terkunci pada setiap slide.

Struktur HTML minimal untuk carousel horizontal sengaja dibuat sederhana.: sebuah elemen pembungkus dan serangkaian item slide di dalamnya. Anda mungkin menggunakan ul dengan li elemen, atau sebuah div dengan anak divCSS menangani sebagian besar pekerjaan, jadi Anda tidak perlu kelas khusus untuk setiap anak kecuali desain Anda memang membutuhkannya.

Pengaturan scroll-snap dasar dapat terlihat seperti ini dalam CSS., dengan asumsi tampilan satu slide dengan lebar penuh:

.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.carousel-item { flex: 0 0 100%; scroll-snap-align: center; }

Di sini kontainer tersebut menggunakan display: flex untuk menjejerkan anak-anaknya secara horizontal, dan overflow-x: auto untuk mengaktifkan pengguliran. Keajaiban ada di scroll-snap-type: x mandatory, yang memberi tahu browser bahwa pengguliran horizontal harus selalu berhenti pada titik jepret yang valid, dan di scroll-snap-align: center pada setiap slide, yang menentukan titik-titik jepretan tersebut.

Kombinasi flexbox dan scroll snap ini langsung terasa seperti carousel.: pengguna menggulir atau menggeser, dan slide terdekat akan langsung terpasang. Karena memanfaatkan fitur pengguliran bawaan, input sentuh pada ponsel dan tablet langsung berfungsi tanpa masalah. penangan gestur atau perpustakaan tambahan.

Anda tidak dibatasi hanya satu item per tampilan.Untuk carousel multi-kolom yang menampilkan beberapa kartu sekaligus, Anda dapat menggunakan lebar fleksibel untuk item, misalnya:

.carousel-item { flex: 0 0 calc(33.333% - 1rem); margin: 0 0.5rem; scroll-snap-align: center; }

Variasi ini memungkinkan Anda menampilkan, misalnya, tiga kartu per tampilan dengan sedikit jarak., sambil tetap memanfaatkan perilaku "snapping". Pengguna dapat menggeser halaman kartu, bukan slide utama tunggal, yang sangat cocok untuk daftar produk atau galeri.

Tombol gulir dengan pseudo-elemen ::scroll-button()

Setelah Anda memiliki scroller yang responsif, hal berikutnya yang diinginkan kebanyakan orang adalah tombol navigasi yang jelas.—kontrol sebelumnya dan berikutnya yang menggeser carousel ke kiri atau ke kanan. Secara tradisional, Anda akan membuat <button> elemen, mengikat peristiwa klik, dan menghitung seberapa jauh harus menggulir.

Spesifikasi CSS Overflow 5 memperkenalkan ::scroll-button(), sebuah pseudo-elemen yang memungkinkan browser melakukan semua pekerjaan berat tersebut.Meskipun fitur ini saat ini tersedia mulai dari Chrome 135 (dan biasanya awalnya menggunakan flag eksperimental), ini adalah gambaran bagaimana carousel akan dibuat di masa mendatang.

Anda mendeklarasikan tombol gulir dengan cara yang sama seperti Anda mendeklarasikan pseudo-elemen lainnya.Sebagai contoh, untuk membuat tombol kiri dan kanan untuk carousel Anda:

.carousel::scroll-button(left) { content: "⬅" / "Scroll left"; }
.carousel::scroll-button(right) { content: "⮕" / "Scroll right"; }
.carousel::scroll-button(*) :focus-visible { outline-offset: 5px; }

Saat CSS ini diterapkan, browser sebenarnya membuat konten yang nyata. <button> elemen sebagai saudara kandung dari wadah gulirKemudian, ia menghubungkan elemen-elemen tersebut ke penggulir, menetapkan peran yang sesuai, dan mengatur perilakunya. Satu klik biasanya menggulir sekitar 85% dari area gulir, yang terasa seperti "halaman" di sebagian besar tata letak carousel.

Jika desain Anda mengharapkan tepat satu item lebar penuh per klikAnda dapat menggabungkan pseudo-elemen ini dengan snapping yang lebih ketat pada setiap elemen anak dengan menambahkan scroll-snap-stop: alwaysHal itu memaksa tampilan (viewport) untuk berhenti tepat di batas item, bukan di tengah jalan.

Properti konten di sini memiliki fungsi ganda.Nilai pertama adalah apa yang dilihat pengguna secara visual (dalam hal ini, karakter panah), dan string kedua adalah teks cadangan yang dapat diakses dan dapat ditampilkan pada teknologi bantu. Anda bebas menata dan memposisikan tombol-tombol ini dengan CSS, atau menggunakan fungsi seperti anchor() untuk menyelaraskannya secara tepat dengan tata letak Anda.

Penanda gulir dengan ::scroll-marker() dan ::scroll-marker-group

Titik atau label di bawah carousel—sering disebut "poin penomoran halaman" atau "penanda"—adalah persyaratan umum lainnya.Mereka menampilkan jumlah item yang ada dan item mana yang saat ini terlihat, serta memungkinkan pengguna untuk langsung menuju ke slide tertentu.

The ::scroll-marker() Pseudo-element memberi Anda indikator ini tanpa perlu membuat tautan jangkar atau rentang secara manual.Setiap penanda pada dasarnya adalah alat navigasi. <a> Elemen yang dibuat oleh browser, yang menunjuk ke item gulir yang sesuai dan berpartisipasi dalam navigasi keyboard dan pembaca layar.

Untuk mengaturnya, Anda memberi tahu browser di mana harus menempatkan grup penanda. dengan scroll-marker-group, dan elemen mana yang akan diberi penanda. Konfigurasi minimalnya bisa terlihat seperti ini:

.carousel { scroll-marker-group: after; }
.carousel > li::scroll-marker { content: " "; }
.carousel > li::scroll-marker:target-current { background: var(--accent); }

Browser tersebut membangun sebuah ::scroll-marker-group kontainer sebagai saudara kandung dari scroller dan mengisinya dengan satu penanda untuk setiap anak yang dipilih.Dalam contoh sederhana ini, penanda ditampilkan sebagai titik kosong, tetapi Anda juga dapat dengan mudah menggunakan teks seperti "Musim 1", ikon, atau bahkan gambar mini dengan mengubah content milik.

Apa yang membuat penanda ini istimewa dibandingkan dengan bilah gulir biasa? Intinya adalah tautan navigasi tersebut benar-benar berfungsi. Tautan tersebut memungkinkan pengguna untuk langsung menuju ke posisi yang bermakna, dan dilengkapi dengan semantik yang bermanfaat: terdapat sebuah :target-current Status yang menunjukkan penanda mana yang sesuai dengan slide yang sedang dilihat atau di-snap. Dukungan keyboard berfungsi seperti kelompok fokus, dan pembaca layar dapat menampilkannya sebagai kontrol seperti daftar tab.

Strategi ini sangat ampuh terutama ketika penggulir Anda merepresentasikan bagian-bagian logis, bukan item individual.Misalnya, alih-alih membuat sepuluh penanda untuk sepuluh episode, Anda dapat membuat dua penanda yang langsung menuju ke awal musim pertama dan musim kedua. Anda bebas memutuskan "poin-poin menarik" apa yang harus dapat diakses.

Menggabungkan tombol dan penanda ke dalam UI carousel yang lengkap.

Ketika Anda menaruh ::scroll-button() ke ::scroll-marker() bersama-sama pada penggulir yang sama, Anda akan mendapatkan UI yang langsung dikenali pengguna sebagai carousel: kontrol sebelumnya/berikutnya, deretan penanda yang menunjukkan seberapa jauh mereka telah maju, dan perpindahan yang mulus antar slide.

Perbedaan utama dari slider JavaScript klasik adalah sebagian besar logika ini sekarang berada di dalam browser.Tombol dan penanda adalah elemen yang dihasilkan dengan peran ARIA yang benar, terintegrasi dengan baik ke dalam urutan tab, dan memiliki cerita aksesibilitas yang dirancang oleh tim browser yang mendasarinya, bukan dibuat ulang untuk setiap situs.

Pendekatan ini menghadirkan beberapa manfaat yang sangat praktis.: Ini berfungsi meskipun JavaScript dinonaktifkan, menghilangkan kedipan hidrasi dan masalah waktu, mengurangi Cumulative Layout Shift karena kontrol sudah diketahui pada saat tata letak CSS, dan terintegrasi dengan mulus dengan animasi berbasis gulir atau kueri status gulir jika Anda ingin menambahkan sentuhan artistik.

Pada perangkat layar sentuh, pengalaman pengguna secara alami ramah terhadap sentuhan jari. karena kontainer gulir masih berupa penggulir bawaan. Pada desktop, roda mouse dan input keyboard berfungsi seperti yang diharapkan, dan indikator fokus pada kontrol yang dihasilkan dapat diberi gaya agar sesuai dengan pedoman desain dan aksesibilitas Anda.

Dari perspektif pemeliharaan, "lakukan lebih sedikit, raih lebih banyak" menjadi deskripsi yang cukup akurat.Alih-alih mempertahankan logika dari berbagai implementasi carousel di berbagai proyek, Anda dapat mengandalkan fitur platform bersama yang terstandarisasi dan akan terus meningkat seiring waktu tanpa pekerjaan tambahan dari pihak Anda.

Menerapkan fitur Scroll Snap dalam proyek nyata.

Sekalipun Anda mengabaikan pseudo-elemen baru untuk sementara waktu, scroll-snap saja sudah cukup baik untuk banyak carousel produksi.Dukungan browser untuk scroll-snap di berbagai mesin browser modern cukup solid, dan perilakunya dapat diprediksi baik dengan roda mouse maupun gerakan sentuh.

Dalam skenario paling sederhana, carousel HTML Anda mungkin berupa... div dengan serangkaian gambar di dalamnyaAnda dapat memberikan kelas pada kontainer tersebut seperti ini: .carousel dan membiarkan gambar anak tidak diklasifikasikan; CSS menangani perataan dan pengguliran.

Dengan menyalakan scroll-behavior: smooth di atas wadah, pengguliran antar titik jepret menjadi lebih animasi dan menyenangkan, bukan tersendat-sendat. Hal ini terutama terlihat ketika pengguna mengklik penanda atau tautan jangkar, atau ketika Anda memicu pengguliran secara terprogram dalam pengaturan hibrida.

Setiap properti scroll-snap utama memainkan peran yang sangat berbeda.. scroll-snap-type menentukan sumbu dan apakah fungsi snapping wajib atau hanya sekadar saran; scroll-snap-align pada anak-anak menentukan di mana mereka terkunci dalam tampilan (awal, tengah, akhir); dan scroll-snap-stop: always mencegah browser melewati titik-titik fokus saat menggulir dengan cepat.

Jika digunakan bersama-sama, properti-properti ini memungkinkan Anda untuk mengatur dengan tepat bagaimana seharusnya tampilan carousel tersebut.—mulai dari penempelan lembut dan toleran yang cocok untuk bagian konten besar, hingga perilaku ketat dan geser demi geser yang sempurna untuk banner utama di mana Anda tidak ingin mendarat "di antara" item.

Karena ini murni CSS, Anda dapat dengan mudah menyesuaikan tata letak secara responsif.Dengan media queries, Anda dapat beralih dari satu slide per tampilan pada layar sempit ke beberapa slide per tampilan pada desktop lebar, hanya dengan mengubah flex-basis dari item. Tidak diperlukan breakpoint JavaScript, listener pengubahan ukuran, atau perhitungan ulang lebar.

Deteksi pseudo-elemen dan fitur eksperimental

Elemen semu berorientasi carousel yang baru—::scroll-button(), ::scroll-marker() ke ::scroll-marker-group—kuat namun masih relatif baruSaat tulisan ini dibuat, fitur-fitur tersebut tersedia di Chrome 135 dan versi yang lebih baru, seringkali dengan memerlukan flag eksperimental, dan akan diluncurkan ke mesin pencari lainnya seiring waktu.

Karena dukungan belum bersifat universal, situs produksi harus mengandalkan deteksi fitur dan mekanisme fallback yang efisien.CSS memberi Anda @supports at-rule, yang memungkinkan Anda menerapkan aturan secara kondisional berdasarkan pengenalan properti.

Anda dapat mendefinisikan bilah navigasi cadangan sederhana.—sekumpulan tautan atau tombol yang terletak di bawah carousel—lalu sembunyikan strip tersebut ketika browser mendukung tombol gulir bawaan. Misalnya:

.carousel-nav { display: flex; gap: 0.5rem; }
@supports (scroll-button-inline: both) { .carousel-nav { display: none; } }

Sini .carousel-nav dapat berisi tautan jangkar yang dibuat secara manual yang mengarah ke slide melalui ID.seperti <a href="#slide1">1</a>Pada browser yang memahami properti scroll-button yang baru, kontrol bawaan Anda akan muncul dan navigasi cadangan akan disembunyikan; pada browser yang lebih lama, navigasi anchor tetap ada, dipadukan dengan scroll-snap untuk pengalaman yang sepenuhnya dapat digunakan.

Strategi hibrida ini memungkinkan eksperimen dengan fitur carousel generasi berikutnya dengan aman saat ini., tanpa membatasi diri pada mesin atau konfigurasi flag tertentu. Seiring dengan semakin matangnya dukungan browser, Anda dapat lebih mengandalkan pseudo-elemen dan mengurangi beberapa kerangka kerja manual.

Carousel putar otomatis berbasis CSS dengan animasi keyframe

Permintaan umum lainnya adalah putar otomatis—sebuah carousel yang bergerak maju dengan sendirinya, dan secara opsional berhenti saat diarahkan kursor ke atasnya.Meskipun pemutaran otomatis memiliki beberapa kendala UX dan aksesibilitas, hal itu dapat dicapai sepenuhnya dengan animasi CSS.

Pola yang mudah dipahami adalah dengan menganimasikan pergeseran horizontal jalur slide Anda..

@keyframes slide {
0%, 20% { transform: translateX(0); }
25%, 45% { transform: translateX(-100%); }
50%, 70% { transform: translateX(-200%); }
75%, 95% { transform: translateX(-300%); }
100% { transform: translateX(0); }
}
.autoplay-carousel { display: flex; animation: slide 12s infinite; }
.autoplay-carousel:hover { animation-play-state: paused; }

Dalam contoh ini, keyframe menghabiskan sebagian waktu di setiap offset sebelum berpindah ke slide berikutnya.Trek tersebut berulang di bagian akhir, memberikan tampilan seperti tayangan slide berulang selama empat slide. Mengarahkan kursor ke atas carousel akan menghentikan animasi, sehingga pengguna dapat memeriksa konten tanpa harus berurusan dengan gerakan yang terus menerus.

Untuk menghormati pengguna yang lebih memilih mengurangi gerakan karena alasan kesehatan atau kenyamanan.Anda dapat membungkus animasi tersebut dalam sebuah media query:

@media (prefers-reduced-motion: reduce) { .autoplay-carousel { animation: none; } }

Hal ini memastikan bahwa pada sistem yang meminta pengurangan pergerakan, slide tetap statis., secara efektif menonaktifkan pemutaran otomatis sambil tetap memungkinkan pengguliran manual atau navigasi tombol/penanda jika tersedia.

Salah satu kompromi penting adalah bahwa pemutaran otomatis berbasis keyframe tidak terintegrasi dengan scroll-snap secara otomatis.Anda menerjemahkan konten secara manual dan tidak mengandalkan fitur scroll bawaan, jadi Anda harus mendesain animasinya dengan hati-hati untuk menghindari slide yang setengah terlihat dan menjaga agar pengaturan waktu tetap sinkron dengan tata letak Anda.

Pertimbangan aksesibilitas untuk carousel CSS

Aksesibilitas adalah area di mana carousel berbasis CSS benar-benar dapat unggul., karena sebagian besar logika yang kompleks beralih dari kode kustom Anda ke perilaku platform yang telah dirancang dan diuji dengan cermat.

Saat Anda mengandalkan pengguliran bawaan plus penguncian gulir, Anda secara otomatis mewarisi dukungan keyboard, sentuhan, dan mouse.Pengguna dapat mengakses scroller dengan menekan tombol Tab, menggunakan tombol panah untuk berpindah, menggesek pada layar sentuh, dan menggulir dengan roda mouse, tanpa memerlukan event listener atau handler khusus.

Tombol gulir dan penanda eksperimental ini melangkah lebih jauh.Browser membuat kontrol carousel tersebut dengan semantik yang sesuai, mengintegrasikannya ke dalam urutan tab, dan mempertahankan statusnya, sehingga sangat sulit untuk secara tidak sengaja melupakan atribut ARIA atau salah memberi label. Kontrol carousel yang dihasilkan cenderung lebih mudah diakses secara konsisten daripada implementasi buatan sendiri.

Anda dapat dan sebaiknya tetap menambahkan petunjuk semantik ke area carousel Anda.Misalnya, menandai wadah dengan role="region" dan deskripsi aria-label Membantu pengguna pembaca layar memahami apa yang diwakili oleh komponen tersebut:

<div class="carousel" role="region" aria-label="Product gallery">
<div class="carousel-item" aria-label="Slide 1 of 3">...</div>
</div>

Memastikan indikator fokus yang terlihat untuk semua elemen interaktif tetap sangat penting.Baik itu tombol dan tautan buatan Anda sendiri atau elemen semu yang dihasilkan browser, pastikan garis fokus tidak dihilangkan atau dibuat terlalu samar sehingga sulit dilihat. Sesuaikan outline, outline-offset atau perubahan latar belakang sesuai kebutuhan untuk memenuhi persyaratan kontras.

Ukuran target sentuh adalah pertimbangan praktis lainnya.Usahakan agar kontrol memiliki ukuran minimal 44x44 piksel untuk memenuhi pedoman aksesibilitas umum, sehingga pengguna tidak kesulitan mengetuk panah atau titik pada layar yang lebih kecil.

Untuk fungsi putar otomatis apa pun, berikan pengguna kendali yang jelas dan hindari gerakan yang terlalu agresif.Sediakan opsi jeda saat kursor diarahkan ke konten atau tombol jeda eksplisit, dan pertimbangkan untuk menonaktifkan pemutaran otomatis jika kontennya padat atau banyak teks. Dikombinasikan dengan prefers-reduced-motionHal ini membuat carousel Anda lebih nyaman bagi khalayak yang lebih luas.

Menangani pengguliran melingkar atau "tak terbatas" dengan CSS

Salah satu perilaku yang sering diminta orang adalah pengguliran melingkar.Saat Anda mencapai slide terakhir dan menggulir lebih jauh, Anda akan kembali dengan mulus ke slide pertama, seperti komidi putar fisik yang berputar tanpa henti.

Saat ini, tidak ada properti CSS murni langsung yang membuat kontainer gulir secara inheren berbentuk lingkaran.Tanpa menduplikasi konten, scroller bawaan akan memiliki awal dan akhir: begitu Anda mencapai item terakhir, pengguliran lebih lanjut tidak akan membawa Anda maju.

Para penulis spesifikasi menyadari bahwa banyak carousel UI mengharapkan perilaku perulangan ini., dan ada minat aktif untuk mengeksplorasi solusi tingkat platform untuk pengguliran siklik, seperti halnya tombol dan penanda gulir baru yang distandarisasi. Meskipun demikian, saat ini Anda tidak dapat meminta browser untuk membungkus posisi gulir secara native dengan satu deklarasi CSS.

Dalam pengaturan CSS murni, mensimulasikan perulangan biasanya berarti menganimasikan transformasi (seperti pada contoh keyframe autoplay) atau menerima akhir linier pada urutan tersebut.Jika konsep "tak terhingga tanpa batas" benar-benar diperlukan dan Anda tidak dapat menduplikasi konten, JavaScript masih menjadi alat yang lebih fleksibel untuk saat ini.

Kabar baiknya adalah tidak ada yang menghalangi Anda untuk menggabungkan carousel yang sebagian besar digerakkan oleh CSS dengan sedikit JavaScript di mana hal itu benar-benar menambah nilai.Anda mungkin mengandalkan scroll-snap dan tombol CSS untuk navigasi sehari-hari, lalu menambahkan beberapa baris skrip untuk memantau posisi scroll dan melompat dari akhir ke awal bila sesuai.

HTML/CSS versus JavaScript untuk carousel berbasis kartu yang kaya fitur.

Dilema yang sering dihadapi oleh pengembang pemula adalah apakah carousel kartu yang lebih kompleks "harus" ditulis dalam JavaScript.Orang sering membayangkan bahwa begitu Anda melangkah lebih jauh dari sekadar gambar sederhana ke kartu responsif dengan berbagai komponen, CSS saja tidak lagi efektif.

Dalam praktiknya, CSS scroll-snap berfungsi sama baiknya untuk rich card seperti halnya untuk gambar biasa.Selama setiap kartu merupakan blok di dalam wadah gulir, Anda dapat menempelkannya, menganimasikannya, dan menambahkan lapisan gaya tambahan di atasnya. Judul, tombol, fragmen teks, dan bahkan media yang disematkan pada dasarnya tidak mengubah mekanismenya.

Keunggulan JavaScript terletak pada perilaku kondisional dan keadaan yang kompleks.Jika carousel Anda harus secara dinamis memfilter kartu, menyusun ulang slide, menyinkronkan dengan komponen lain, mengambil konten baru secara langsung, atau mendukung logika yang sangat disesuaikan ("jika titik ini diklik, tampilkan kartu yang sama sekali tidak terkait"), maka JavaScript dapat mengekspresikan logika bisnis tersebut dengan lebih mudah daripada hanya menggunakan CSS.

Namun, sejumlah besar slider sehari-hari pada dasarnya adalah daftar item statis yang bergerak maju secara linear.Untuk kasus-kasus tersebut, menggunakan beberapa baris CSS daripada mengimpor pustaka JS yang besar lebih mudah dipahami dan lebih baik untuk performa. Memahami scroll-snap dan pseudo-elemen yang lebih baru memungkinkan Anda untuk menyimpan JavaScript untuk kasus-kasus langka di mana penggunaannya benar-benar menguntungkan.

Jika Anda masih belajar pengembangan front-end, menjadikan CSS carousel sebagai standar dasar adalah kebiasaan yang bagus.Mulailah dengan HTML dan CSS, dan gunakan skrip hanya ketika Anda menemukan keterbatasan yang jelas. Ini akan mengajarkan Anda lebih banyak tentang apa yang sudah dapat dilakukan platform tersebut dan seringkali menghasilkan basis kode yang lebih ramping dan bersih.

Jika kita melihat lebih jauh, berikut adalah serangkaian fitur CSS yang muncul seputar pengguliran, penyesuaian posisi, tombol, penanda, dan kueri status pengguliran. telah mengubah carousel dari widget yang sarat skrip menjadi komponen yang sebagian besar deklaratif. Dengan mengandalkan scroll-snap untuk perilaku paging inti, menggunakan ::scroll-button() ke ::scroll-marker() Jika didukung, dan dengan menerapkan deteksi fitur dan praktik terbaik aksesibilitas, Anda dapat mengirimkan carousel yang cepat, tangguh, dan lebih mudah dipelihara daripada slider berbasis JS tradisional—sambil tetap mempertahankan fleksibilitas yang cukup untuk mencampurkan JavaScript di mana logika siklik atau interaksi tingkat lanjut benar-benar membutuhkannya.