Panduan Lengkap Carousel CSS Tanpa JavaScript

Beranda » Ular sanca » Panduan Lengkap Carousel CSS Tanpa JavaScript

Membuat carousel tanpa satu baris kode JavaScript pun bukan lagi fiksi ilmiah.CSS modern memberi Anda semua yang Anda butuhkan untuk membuat slider yang halus dan ramah sentuhan menggunakan Properti CSS touch-action yang terasa seperti bawaan browser. Mulai dari scroll snapping hingga pseudo-element eksperimental yang secara otomatis menghasilkan kontrol navigasi, Anda dapat menghadirkan komponen berfitur lengkap sambil menjaga ukuran bundle tetap ramping dan hidup Anda lebih sederhana.

Jika Anda pernah bergulat dengan pustaka carousel JS yang berat, masalah hidrasi, atau keanehan aksesibilitas, carousel berbasis CSS saja adalah angin segar.Dengan spesifikasi terbaru (seperti CSS Overflow Level 5) dan fitur-fitur yang sudah mapan seperti... scroll-snap-type, kini realistis untuk mengirimkan carousel siap produksi yang cepat, dapat diakses melalui keyboard, dan tangguh saat JavaScript dinonaktifkan.

Mengapa CSS modern menjadikan carousel JavaScript opsional?

Selama bertahun-tahun, jawaban standar untuk pertanyaan “bagaimana cara membuat carousel?” adalah “gunakan library JS”.Swiper, Slick, Glide, carousel Bootstrap, dan banyak lainnya memecahkan masalah ini dengan mengatur event listener, timer, resize observer, dan peran ARIA untuk Anda—tetapi mereka juga menambahkan kilobyte ekstra ke dalam bundle Anda dan memperkenalkan dependensi lain yang perlu dipelihara.

Saat ini, CSS telah secara diam-diam mengejar ketertinggalan dengan sebagian besar kasus penggunaan carousel yang umum.Dengan beberapa properti, Anda dapat mengubah scroller horizontal biasa menjadi pengalaman paginasi dan pengguliran otomatis yang berfungsi dengan roda mouse, trackpad, panah keyboard, dan gesekan sentuh. Tanpa listener, tanpa reflow yang disebabkan oleh logika JS, dan tanpa race condition dengan hidrasi dalam framework.

Ide dasarnya sederhana: Anda memperlakukan carousel Anda sebagai area yang dapat digulir., bukan sebagai komponen ajaib yang berpindah antar slide. CSS kemudian "membantu" pengguliran dengan titik jepret, transisi halus, dan, dalam spesifikasi terbaru, tombol dan penanda bawaan yang disuntikkan browser ke dalam DOM sebagai elemen interaktif nyata.

Pergeseran ini memiliki konsekuensi besar terhadap kinerja dan ketahanan.Carousel CSS tetap berfungsi sempurna meskipun JavaScript diblokir, gagal dimuat, atau dinonaktifkan oleh pengguna. Mesin pengguliran bawaan browser melakukan sebagian besar pekerjaan berat, yang sangat dioptimalkan di setiap mesin utama dan disetel untuk perangkat berdaya rendah dan alat aksesibilitas.

Selain itu, fitur CSS seperti :has()Tata letak grid dan animasi berbasis scroll terhubung ke area scroll yang sama., memungkinkan Anda membangun indikator slide yang canggih, pengungkapan konten, atau paralaks tanpa menggabungkan tiga sistem berbeda (kode Anda, logika pustaka, dan pengguliran browser) dengan cara yang rapuh.

Komponen inti: Scroll Snap untuk carousel berbasis CSS saja.

Inti dari carousel yang hanya menggunakan CSS adalah modul Scroll Snap., yang memungkinkan Anda menentukan titik "magnetik" yang akan menjadi titik tumpu posisi gulir setelah pengguna berhenti menggulir. Alih-alih berhenti di tengah antara dua slide, tampilan akan langsung menempel ke slide terdekat, memberikan nuansa slider klasik.

Struktur HTML bisa seminimal mungkin.: sebuah wadah yang dapat digulir secara horizontal, ditambah serangkaian elemen geser di dalamnya. Anda bahkan tidak perlu memberi setiap gambar atau kartu kelasnya sendiri jika markup Anda konsisten—meskipun memberi nama pada item Anda sering membantu dalam hal penataan gaya dan aksesibilitas:

Contoh struktur untuk carousel gambar dasar. dapat dikonseptualisasikan sebagai pembungkus seperti <ul class="carousel"> dengan banyak <li> item, masing-masing berisi gambar atau kartu. Keajaiban terletak pada CSS:

Anda mendefinisikan kontainer sebagai tata letak fleksibel horizontal dengan pengguliran diaktifkan. dan tentukan bahwa itu harus menempel pada sumbu x:

.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }

Setiap slide individual kemudian memperlihatkan posisi jepretan., biasanya di tengah atau awal tampilan, dan menetapkan basis tetap sehingga satu atau beberapa muncul per tampilan:

.carousel-item { flex: 0 0 100%; scroll-snap-align: center; }

Pola ini sudah memberikan Anda sebuah carousel yang sangat lengkap.Pengguna dapat menggeser layar di perangkat seluler, menggulir dengan mouse atau trackpad, dan tampilan akan selalu berada pada slide terdekat. Tidak ada JavaScript yang memantau peristiwa pengguliran atau menyesuaikan posisi secara manual.

Untuk membuat carousel multi-item (seperti strip produk), Anda hanya perlu mengubah basis fleksibelnya.Misalnya, Anda dapat menampilkan tiga item per tampilan dengan sedikit jarak menggunakan sesuatu seperti ini: flex: 0 0 calc(33.333% - 1rem) ditambah margin samping. Scroll Snap tidak mempermasalahkan apakah setiap "halaman" berupa satu slide lebar penuh atau sekelompok kartu yang lebih kecil.

Properti seperti object-fit: cover berguna saat bekerja dengan gambar mentah, memastikan bahwa gambar mengisi area slide tanpa meregang. Dikombinasikan dengan rasio aspek tetap, Anda bisa mendapatkan carousel gambar yang tetap konsisten secara visual pada ukuran layar apa pun.

Dari scroller sederhana hingga carousel yang terasa alami.

Carousel gulir-jepret yang sederhana saja sudah terasa nyaman, tetapi spesifikasi modern membawanya lebih jauh lagi.Terutama di Chrome 135+ di mana draf CSS Overflow Level 5 mulai muncul sebagai fitur nyata. Spesifikasi tersebut memperlakukan carousel sebagai area gulir dengan UI opsional yang dihasilkan oleh browser di sekitarnya.

Dalam model tersebut, "carousel" sama dengan: satu penggulir ditambah hingga dua set fitur yang tersedia.—tombol gulir dan penanda gulir. Keduanya dibuat oleh pseudo-elemen CSS, tetapi browser memancarkan elemen DOM sebenarnya di sebelah penggulir Anda sehingga berperilaku seperti kontrol asli.

Yang terpenting, browser menghubungkan semantik, urutan fokus, dan manajemen status untuk Anda.Elemen-elemen yang disuntikkan memiliki peran yang tepat, dapat diakses dengan tombol Tab dalam urutan yang masuk akal, dan mencerminkan posisi gulir saat ini. Itu berarti mereplikasi tingkat aksesibilitas yang sama dengan pustaka JS buatan sendiri bukanlah hal yang mudah; Anda memerlukan atribut ARIA, perilaku kelompok fokus, navigasi keyboard, dan pengumuman wilayah langsung yang semuanya bekerja bersama.

Meskipun Anda belum siap untuk mengandalkan bagian-bagian eksperimentalnya, arahan ini tetap penting.Ini menandakan bahwa carousel, tab, komponen scrollspy, dan pola UI serupa sedang diangkat menjadi "warga kelas satu" dalam CSS, yang secara bertahap akan mengurangi kebutuhan akan kode penghubung JavaScript khusus.

Hasil akhirnya adalah landasan yang lebih kuat bagi semua pengguna.—termasuk orang-orang yang menonaktifkan JS, mengandalkan teknologi bantu, memiliki perangkat berdaya rendah, atau menjelajah internet dalam kondisi jaringan yang tidak stabil. Pengguliran bawaan ditambah penataan gaya CSS mengungguli widget yang sarat skrip dalam semua skenario tersebut.

Menambahkan tombol gulir dengan ::scroll-button()

Di beberapa platform, Anda sudah melihat panah kecil di samping bilah gulir., tapi yang baru ::scroll-button() Pseudo-element melangkah lebih jauh dan memungkinkan CSS untuk mendefinisikan tombol "sebelumnya/berikutnya" khusus untuk area yang dapat digulir—termasuk carousel.

Tombol gulir yang ditentukan CSS ini berperilaku berbeda dari panah bilah gulir konvensional.Alih-alih menggeser konten sedikit demi sedikit, mereka melompat sekitar 85% dari area yang terlihat per klik. Dalam carousel lebar penuh yang disejajarkan secara otomatis, itu terasa hampir persis seperti tombol navigasi per slide.

Jika Anda benar-benar membutuhkan pergerakan satu item yang tepat, Anda dapat menggabungkan opsi penguncian gulir.Resep yang umum adalah... scroll-snap-type: x mandatory pada wadah dan scroll-snap-stop: always pada setiap anak yang difoto. Dengan begitu, satu kali tekan tombol gulir akan membawa Anda dari satu kartu ke kartu berikutnya.

Dari perspektif sintaksis, menambahkan tombol gulir sangat mirip dengan menata gaya pseudo-elemen lainnya.Anda memilih elemen yang dapat digulir (misalnya, .carousel) dan target ::scroll-button(left) or ::scroll-button(right) untuk mewakili kontrol maju dan mundur. Contoh minimal:

.carousel::scroll-button(left) { content: "⬅" / "Scroll left"; }

.carousel::scroll-button(right) { content: "⮕" / "Scroll right"; }

Nilai konten yang dipisahkan oleh garis miring memungkinkan Anda untuk memberikan label visual dan label yang mudah diakses.Kemudian, browser tersebut membuat objek nyata. <button> Node-node tersebut berfungsi sebagai saudara dari area gulir Anda dan menempatkan konten Anda di dalamnya. Anda tetap bebas memposisikan dan menatanya sesuai keinginan, seperti elemen lainnya—menggunakan posisi absolut, grid CSS, atau bahkan posisi jangkar.

Fokus pada penataan gaya tetap penting di sini.Misalnya, menerapkan aturan seperti .carousel::scroll-button(*):focus-visible { outline-offset: 5px; } Memastikan bahwa ketika pengguna menekan tombol Tab untuk berpindah ke tombol-tombol ini, mereka melihat lingkaran fokus yang jelas dan berjarak dari batas elemen, sehingga menjaga kemudahan penggunaan keyboard dan kepatuhan terhadap standar WCAG.

Di balik layar, browser melacak status tombol dan rentang gulir yang tersedia.Artinya, Anda tidak perlu khawatir menonaktifkan tombol "sebelumnya" saat berada di slide pertama atau tombol "berikutnya" di akhir; platform dapat menangani kondisi tersebut dengan cara yang terstandarisasi.

Gulir penanda dengan ::scroll-marker() untuk navigasi poin atau label.

Penanda visual—titik atau gambar kecil di bawah carousel—hampir menjadi hal yang diharapkan oleh pengguna saat ini.. Baru ::scroll-marker() Pseudo-element memungkinkan Anda menghasilkan indikator-indikator tersebut sepenuhnya dengan CSS, yang masing-masing terhubung ke item tertentu dalam daftar yang dapat digulir.

Berbeda dengan thumb scrollbar, penanda scroll mewakili poin-poin penting semantik.Setiap penanda tidak hanya sesuai dengan posisi dalam piksel, tetapi juga dengan elemen anak yang sebenarnya, sehingga ideal untuk skenario seperti musim dalam serial TV, kategori produk, atau bab logis dalam sebuah cerita, bukan untuk setiap bingkai.

Penanda tersebut tampak valid. <a> elemen, memberikan Anda dua fitur penting secara gratis: navigasi dalam halaman dan semantik yang tepat untuk pembaca layar. Fitur ini berfungsi hampir sama seperti tautan jangkar, tetapi dengan beberapa peningkatan yang disesuaikan untuk penggunaan carousel.

Di antara peningkatan tersebut adalah: :target-current kelas semu, yang cocok ketika item yang bersangkutan saat ini sedang ditampilkan atau dianggap sebagai "slide aktif". Anda dapat menggunakannya untuk menyorot penanda aktif dengan latar belakang atau batas yang berbeda.

Untuk menghubungkan ini, pertama-tama Anda perlu menentukan di mana kelompok penanda tersebut harus ditempatkan. menggunakan scroll-marker-group properti pada kontainer, biasanya sebelum atau sesudah penggulir. Misalnya, scroll-marker-group: after; akan menempatkan penanda setelah wilayah carousel di DOM.

Kemudian Anda menargetkan anak-anak tertentu yang seharusnya menghasilkan penanda.Jika slide Anda <li> elemen, sesuatu seperti .carousel > li::scroll-marker Baiklah. Pola yang umum adalah membuat titik-titik kosong:

.carousel { scroll-marker-group: after; }

.carousel > li::scroll-marker { content: " "; }

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

Browser akan menangani pembuatan <a> penanda, mengelompokkannya ke dalam kontainer ::scroll-marker-group khusus., dan menampilkannya sebagai elemen yang dapat dinavigasi dengan keyboard yang berperilaku seperti kelompok fokus. Pembaca layar dapat menyajikannya serupa dengan daftar tabel: Anda memindahkan fokus di antara penanda dan mengaktifkannya untuk melompat ke slide tertentu.

Penanda tidak terbatas pada titik-titik.. Anda dapat mengatur content ke angka ("1", "2"(dll.), label yang mudah dibaca manusia seperti “Musim 1” atau “Bab 3”, atau bahkan gambar sebaris untuk membuat galeri thumbnail untuk tata letak yang banyak berisi foto seperti galeri produk e-commerce.

Menggabungkan tombol, penanda, dan strategi cadangan.

Saat Anda menggabungkan tombol gulir dan penanda di atas carousel dengan fitur pengguliran otomatis, Anda akan mendapatkan komponen yang terasa tidak dapat dibedakan dari solusi JavaScript.Namun, perangkat ini lebih mudah dirawat dan memiliki lebih sedikit komponen bergerak. Pengguna dapat mengklik panah, mengetuk poin, menggesek layar sentuh, atau menggunakan navigasi keyboard—semuanya dengan perilaku yang konsisten.

Kombinasi ini juga mengatasi masalah umum terkait performa dan UX.Karena tidak ada skrip yang mengkoordinasikan perubahan slide, Anda tidak akan mengalami perubahan tata letak yang berantakan akibat pengaturan manual. scrollLeft Penyesuaian atau timer yang berjalan pada waktu yang tidak tepat. CLS (Cumulative Layout Shift) berkurang karena pohon DOM sudah siap sejak awal dan Anda tidak menyuntikkan atau mengukur elemen di akhir siklus hidup.

Namun, ada kendalanya: ::scroll-button dan ::scroll-marker masih dalam tahap eksperimental. dan saat ini hanya tersedia di Chrome 135+ di balik fitur eksperimental. Itu berarti Anda benar-benar harus merancang mekanisme fallback yang baik jika Anda berencana menggunakannya di situs produksi.

Deteksi fitur melalui @supports adalah sekutu terbaikmu di siniAnda dapat menampilkan bilah navigasi tradisional—tautan ke #slide1, #slide2 dan seterusnya—secara default, lalu sembunyikan saat kontrol bawaan tersedia. Pola konseptual kasarnya terlihat seperti ini:

.carousel-nav { display: flex; gap: 0.5rem; }

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

Dalam HTML, navigasi sederhana dengan tautan jangkar sudah cukup.: setiap slide mendapat satu id, dan navigasi mengarah ke ID tersebut. Melompat ke jangkar di dalam wadah scroll-snap terintegrasi dengan baik dengan perilaku snapping, sehingga slide akan menempel dengan rapi setelah lompatan.

Ini berarti Anda dapat menikmati manfaat dari pseudo-elemen eksperimental di browser yang mendukungnya.—tombol, penanda, dan kait status gulir asli sepenuhnya—sambil tetap menawarkan pengalaman yang berfungsi penuh di tempat lain. Tidak ada pengguna yang terjebak dengan slider yang tidak dapat digunakan.

Terlebih lagi, semua ini tetap berfungsi meskipun JavaScript dinonaktifkan., karena Anda sepenuhnya mengandalkan tautan HTML, perilaku pengguliran CSS, dan mesin pengguliran peramban. Untuk banyak pola UX—galeri, garis waktu, tampilan langkah demi langkah—itu sudah lebih dari cukup.

Carousel putar otomatis berbasis CSS dengan animasi keyframe

Salah satu fitur umum yang diharapkan orang dari carousel adalah pemutaran otomatis.—slide akan berganti secara otomatis setelah beberapa detik. Meskipun ini sering diimplementasikan dengan timer JavaScript, Anda juga dapat mendekati perilaku ini menggunakan animasi CSS murni.

Kuncinya adalah menganimasikan transformasi baris fleksibel yang berisi semua slide.Untuk jumlah slide yang tetap, Anda menentukan garis waktu keyframe di mana trek tetap berada di setiap posisi slide untuk sementara waktu, lalu melompat ke slide berikutnya. Kira-kira seperti ini:

@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); } }

Kemudian Anda menerapkan animasi ini ke pembungkusnya. yang menampung elemen slide Anda, misalnya .autoplay-carousel { display: flex; animation: slide 12s infinite; }Rentang persentase tersebut menentukan waktu "berdiam" pada setiap slide sehingga konten dapat dibaca sebelum beralih ke slide berikutnya.

Sangat penting untuk menambahkan cara bagi pengguna untuk menghentikan sementara pemutaran otomatis.Pola yang sederhana namun efektif adalah memberikan jeda saat kursor diarahkan ke atasnya. .autoplay-carousel:hover { animation-play-state: paused; }, sehingga pengguna desktop dapat menghentikan gerakan saat mereka berinteraksi dengan konten.

Pertimbangan aksesibilitas bahkan lebih jauh lagi dengan preferensi gerakan.Menghormati prefers-reduced-motion Hal ini dianggap sebagai praktik terbaik, jadi Anda dapat menonaktifkan animasi sepenuhnya untuk pengguna yang lebih menyukai gerakan yang lebih sedikit:

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

Meskipun solusi pemutaran otomatis CSS tidak dapat dengan mudah menangani semua kasus khusus yang dapat ditangani oleh JavaScript.—seperti penghitung slide yang benar-benar dinamis atau logika jeda/lanjutkan yang kompleks yang dikendalikan pengguna— fitur-fitur ini ternyata sangat solid untuk carousel statis yang sederhana ketika Anda ingin menghindari pembuatan skrip sama sekali.

Membandingkan carousel berbasis CSS saja dan JavaScript.

Memilih antara CSS dan JavaScript untuk carousel bukanlah pilihan yang mutlak.Itu tergantung pada kebutuhan Anda, audiens, dan anggaran pemeliharaan. Namun, keseimbangan telah bergeser jauh ke arah CSS untuk banyak skenario dunia nyata.

Dari segi performa, CSS carousel jelas merupakan pemenangnya.Tidak ada penguraian atau eksekusi kode pustaka, tidak ada pendengar peristiwa pada setiap interaksi pengguliran, dan tidak ada perhitungan ulang tata letak saat runtime yang dipicu oleh penyesuaian skrip. Mesin pengguliran peramban ditulis dalam kode asli yang sangat dioptimalkan dan disetel untuk segala hal mulai dari desktop kelas atas hingga ponsel berdaya rendah.

Dari segi aksesibilitas, fitur carousel CSS baru ini secara signifikan meningkatkan standar.Tombol dan penanda gulir yang disediakan browser sudah dilengkapi dengan peran ARIA, perilaku keyboard, dan pengumuman yang jika tidak, harus dibuat ulang secara teliti di JavaScript. Bahkan tanpa itu, carousel dengan fitur pengguliran otomatis tetap dapat diakses dengan peran dan label.

Di sisi lain, JavaScript tetap berguna untuk pola-pola yang sangat canggih.Jika Anda memerlukan logika putar otomatis yang rumit, kait analitik, fisika khusus, atau untuk menyinkronkan beberapa carousel dengan status bersama (misalnya, gambar utama ditambah baris thumbnail ditambah paginasi eksternal), pendekatan berbasis skrip masih bisa lebih fleksibel.

Namun, poin pentingnya adalah bahwa banyak carousel "sehari-hari" sebenarnya tidak membutuhkan tingkat kerumitan seperti ini.Galeri produk sederhana, slider testimoni, atau strip "pos unggulan" biasanya dapat diimplementasikan dengan scroll snap, beberapa aturan CSS, dan kontrol bawaan opsional—menghemat Anda dari penggunaan dependensi sebesar 50KB hanya untuk berpindah antar tiga slide.

Pertimbangan lainnya adalah ketahanan saat JavaScript mengalami kegagalan.Carousel yang hanya menggunakan CSS tetap berfungsi dengan sempurna meskipun JavaScript diblokir oleh proxy perusahaan, terganggu oleh pemblokir iklan, atau belum dimuat saat pengguna mengunjungi halaman tersebut. Kemampuan bertahan dalam kondisi seperti itu sulit dicapai dengan pustaka yang bergantung pada fase inisialisasi setelah halaman dimuat.

Praktik terbaik aksesibilitas untuk carousel CSS

Meskipun peramban membantu dalam beberapa aspek aksesibilitas, Anda tetap memainkan peran penting. Dalam membuat carousel CSS Anda dapat digunakan oleh semua orang, semantik, manajemen fokus, dan sensitivitas gerakan harus menjadi prioritas utama Anda.

Pertama, berikan penanda lokasi yang sesuai untuk komidi putar tersebut.Membungkusnya dalam sebuah elemen dengan role="region" dan deskripsi aria-label Fitur seperti “Galeri Produk” atau “Artikel Unggulan” memudahkan pengguna pembaca layar untuk menemukan dan memahami konten.

Setiap slide juga dapat dilengkapi dengan label yang mudah diakses.misalnya melalui aria-label dengan menyatakan “Slide 1 dari 3”, “Slide 2 dari 3”, dan seterusnya. Dengan begitu, ketika pengguna membuka sebuah slide, mereka akan langsung mendapatkan konteks tentang posisi mereka dalam urutan tersebut.

Jangan lupakan indikator fokus yang terlihat.Setiap elemen interaktif—baik itu sebuah ::scroll-button, Sebuah ::scroll-marker-Tautan yang dihasilkan secara otomatis, atau jangkar manual di navigasi cadangan Anda—membutuhkan gaya fokus yang jelas yang memenuhi pedoman kontras dan tidak dihapus oleh pengaturan ulang global.

Jika Anda menggunakan pemutaran otomatis atau animasi berbasis gulir, hormati preferensi gerakan.. Menggunakan prefers-reduced-motion Menonaktifkan atau menyederhanakan animasi bukanlah pilihan jika Anda peduli dengan pengguna yang rentan terhadap mabuk perjalanan, dan cukup mudah untuk membungkus efek yang lebih intens dalam sebuah media query.

Terakhir, pertimbangkan ukuran target sentuh.Baik Anda menata penanda gulir bawaan atau tautan navigasi Anda sendiri, jaga agar area interaktif setidaknya berukuran sekitar 44×44 piksel CSS. Itu biasanya berarti padding dan spasi yang cukup besar, bukan lingkaran kecil yang berdekatan.

Alur kerja, alat, dan arah masa depan di dunia nyata.

Untuk mempermudah eksperimen dengan carousel CSS, beberapa tim telah membuat alat konfigurator langsung. Di sini Anda dapat mengaktifkan sakelar—mengaktifkan tombol gulir, mengaktifkan/menonaktifkan penanda, menyesuaikan mode snap—dan langsung melihat CSS yang diperbarui yang diperlukan untuk konfigurasi tersebut. Area bermain ini sangat bagus untuk belajar sambil bereksperimen.

Selain konfigurator, galeri pilihan demo carousel khusus CSS menampilkan berbagai kemungkinan yang dapat dilakukan.Anda akan menemukan pola-pola seperti antarmuka bertab, navigasi scrollspy, slide berbasis langkah, galeri thumbnail, dan banyak lagi, semuanya memiliki dasar yang sama yaitu area gulir ditambah snapping dan kontrol opsional.

Banyak dari situs demo ini sengaja dikirimkan tanpa JavaScript sama sekali. Untuk membuktikan poin ini: UI yang kaya dan terasa interaktif sepenuhnya dapat dicapai hanya dengan HTML dan CSS. Mereka sering kali memperlihatkan kegunaannya melalui @layer deklarasi, sehingga Anda dapat memeriksa dan memilih gaya yang sesuai dengan sistem desain Anda sendiri.

Ke depan, platform CSS sudah mengerjakan dua jalur evolusi penting.Yang pertama adalah "bawa elemen Anda sendiri," di mana alih-alih mengandalkan tombol dan penanda yang dihasilkan browser, Anda dapat memasukkan elemen Anda sendiri. <a> ke <button> markup, sambil tetap memanfaatkan logika scroll yang mendasarinya.

Ini akan membuka pintu bagi kontrol bermerek dan bergaya mewah yang dibangun dengan kerangka kerja utilitas. Seperti Tailwind, namun tetap menjaga semantik dan perilaku yang diatur oleh platform. Pada dasarnya Anda akan mempercantik UI tetapi membiarkan browser tetap menjadi otak dari operasi tersebut.

Area besar kedua adalah pengguliran siklik atau tak terbatas.Banyak carousel saat ini "berputar kembali" ketika Anda mencapai akhir, berulang tanpa jeda kembali ke slide pertama. Menerapkan ini dengan rapi itu sulit, seringkali melibatkan konten duplikat atau logika yang kompleks. Dukungan tingkat platform untuk pengguliran siklik akan memungkinkan browser menangani perilaku putaran kembali dengan lebih elegan dan efisien.

Seiring fitur-fitur ini berkembang dan menyebar dari Chrome ke mesin pencari lainnya,Dengan demikian, kesenjangan antara apa yang dapat dilakukan oleh "carousel CSS asli" dan apa yang ditawarkan oleh pustaka JavaScript yang berat akan terus menyempit, menjadikan pendekatan tanpa skrip sebagai titik awal standar dan bukan lagi eksperimen kasus khusus.

Secara keseluruhan, CSS modern memberi Anda setiap alasan untuk memikirkan kembali cara Anda membangun carousel.Dimulai dengan tata letak scroll-snap sederhana, menambahkan tombol dan penanda eksperimental jika didukung, dan menyebarkan praktik terbaik aksesibilitas di seluruh bagian, Anda dapat menghadirkan slider yang responsif, halus, dan tangguh tanpa bergantung pada JavaScript. Bagi banyak proyek, itu berarti halaman yang lebih cepat, lebih sedikit kode yang perlu dipelihara, dan pengalaman yang lebih tangguh bagi setiap pengguna.