Karusel CSS Tanpa JavaScript: Panduan Lengkap

Laman Utama » Python » Karusel CSS Tanpa JavaScript: Panduan Lengkap

Membina karusel tanpa satu baris JavaScript bukan lagi fiksyen sains; CSS moden memberikan anda semua yang anda perlukan untuk mencipta gelangsar yang lancar dan mesra sentuhan menggunakan Sifat tindakan sentuh CSS yang terasa seperti asli dalam pelayar. Daripada penjepretan skrol kepada pseudo-elemen eksperimen yang menjana kawalan navigasi secara automatik, anda boleh menyediakan komponen berciri penuh sambil memastikan pakej anda ringkas dan kehidupan anda lebih mudah.

Jika anda pernah bergelut dengan pustaka karusel JS yang berat, isu penghidratan atau kebiasaan kebolehcapaian, karusel CSS sahaja adalah nafas baharuDengan spesifikasi terkini (seperti CSS Overflow Level 5) dan ciri-ciri yang mantap seperti scroll-snap-type, kini realistik untuk menghantar karusel sedia pengeluaran yang pantas, boleh diakses papan kekunci dan berdaya tahan apabila JavaScript dinyahdayakan.

Mengapa CSS moden menjadikan karusel JavaScript pilihan

Selama bertahun-tahun, jawapan lalai kepada "bagaimana saya membina karusel?" ialah "ambil pustaka JS"Swiper, Slick, Glide, karusel Bootstrap dan banyak lagi menyelesaikan masalah dengan mengimbangi pendengar peristiwa, pemasa, mengubah saiz pemerhati dan peranan ARIA untuk anda—tetapi mereka juga memasukkan kilobait tambahan ke dalam pakej anda dan memperkenalkan satu lagi kebergantungan untuk dikekalkan.

Hari ini, CSS secara senyap-senyap telah mengikuti kebanyakan kes penggunaan karusel yang biasaDengan beberapa ciri, anda boleh menukarkan penatal mendatar biasa kepada pengalaman snap-to-slaid berhalaman yang berfungsi dengan roda tetikus, pad jejak, anak panah papan kekunci dan leretan sentuh. Tiada pendengar, tiada aliran semula yang disebabkan oleh logik JS dan tiada keadaan perlumbaan dengan penghidratan dalam rangka kerja.

Idea asasnya mudah: anda melayan karusel anda sebagai kawasan yang boleh ditatal, bukan sebagai komponen ajaib yang berteleportasi antara slaid. CSS kemudian "membantu" skrol dengan titik snap, peralihan yang lancar dan, dalam spesifikasi terkini, butang dan penanda terbina dalam yang disuntik oleh pelayar ke dalam DOM sebagai elemen interaktif sebenar.

Perubahan ini mempunyai akibat yang besar terhadap prestasi dan daya tahanKarusel CSS masih berfungsi dengan sempurna apabila JS disekat, gagal dimuatkan atau dilumpuhkan oleh pengguna. Enjin skrol pelayar sendiri melakukan kebanyakan kerja berat, yang sangat dioptimumkan dalam setiap enjin utama dan ditala untuk peranti berkuasa rendah dan alat kebolehcapaian.

Selain itu, ciri CSS seperti :has(), susun atur grid dan animasi dipacu skrol dipasangkan ke dalam kawasan skrol yang sama, membolehkan anda membina penunjuk slaid, pendedahan kandungan atau paralaks yang canggih tanpa menggabungkan tiga sistem berbeza (kod anda, logik pustaka dan skrol pelayar) dengan cara yang rapuh.

Blok binaan teras: Skrol Snap untuk karusel CSS sahaja

Di tengah-tengah karusel CSS sahaja ialah modul Scroll Snap, yang membolehkan anda menentukan titik "magnet" yang sepatutnya dikunci oleh kedudukan tatal selepas pengguna berhenti menatal. Paparan beralih ke titik terdekat daripada mendarat di tengah-tengah antara dua slaid, memberikan nuansa gelangsar klasik.

Struktur HTML boleh jadi minimum: bekas yang menatal secara mendatar, serta satu siri elemen slaid di dalamnya. Anda tidak perlu memberikan setiap imej atau kad kelasnya sendiri jika penanda anda konsisten—walaupun menamakan item anda selalunya membantu untuk penggayaan dan kebolehcapaian:

Contoh struktur untuk karusel imej asas boleh dikonseptualisasikan sebagai pembungkus seperti <ul class="carousel"> dengan berganda <li> item, setiap satunya mengandungi imej atau kad. Keajaibannya hidup dalam CSS:

Anda mentakrifkan bekas sebagai susun atur flex mendatar dengan penatalan diaktifkan dan nyatakan bahawa ia harus terputus di sepanjang paksi x:

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

Setiap slaid individu kemudian mendedahkan kedudukan snap, biasanya di tengah atau permulaan viewport dan menetapkan asas tetap supaya satu atau beberapa dipaparkan setiap paparan:

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

Corak ini sudah memberikan anda karusel yang lengkap secara mengejutkan: pengguna boleh meleret pada mudah alih, menatal dengan tetikus atau pad jejak dan port paparan akan sentiasa berada pada slaid terdekat. Tiada JS yang memerhatikan peristiwa tatal atau melaraskan kedudukan secara manual.

Untuk mencipta karusel berbilang item (seperti jalur produk), anda hanya perlu mengubah suai asas fleksibilitiContohnya, anda mungkin memaparkan tiga item setiap paparan dengan sedikit jarak dengan menggunakan sesuatu seperti flex: 0 0 calc(33.333% - 1rem) serta margin sisi. Scroll Snap tidak kisah sama ada setiap "halaman" ialah slaid lebar penuh tunggal atau sekumpulan kad yang lebih kecil.

Hartanah seperti object-fit: cover berguna apabila bekerja dengan imej mentah, memastikan ia memenuhi kawasan slaid mereka tanpa meregang. Digabungkan dengan nisbah aspek tetap, anda boleh mendapatkan karusel imej yang kekal konsisten secara visual pada sebarang saiz skrin.

Daripada penatal biasa kepada karusel yang terasa seperti permainan asal

Karusel snap-skrol kosong sudah terasa bagus, tetapi spesifikasi moden membawanya lebih jauh, terutamanya dalam Chrome 135+ di mana draf CSS Overflow Level 5 mula muncul sebagai ciri sebenar. Spesifikasi tersebut melayan karusel sebagai kawasan tatal dengan UI pilihan yang dijana pelayar di sekelilingnya.

Dalam model itu, "karusel" bersamaan dengan: satu penatal ditambah sehingga dua set affordances—butang skrol dan penanda skrol. Kedua-duanya dicipta oleh elemen pseudo CSS, tetapi pelayar memancarkan adik-beradik DOM sebenar di sebelah skrol anda supaya ia berkelakuan seperti kawalan asli.

Yang penting, pelayar ini menghubungkan semantik, susunan fokus dan pengurusan keadaan untuk andaElemen yang disuntik mempunyai peranan yang betul, ia boleh diletakkan dalam tab dalam susunan yang munasabah dan ia mencerminkan kedudukan skrol semasa. Ini bermakna mereplikasi tahap kebolehcapaian yang sama dengan pustaka JS yang dilancarkan dengan tangan adalah mudah; anda memerlukan atribut ARIA, tingkah laku kumpulan fokus, navigasi papan kekunci dan pengumuman rantau langsung yang semuanya berfungsi bersama-sama.

Walaupun anda belum bersedia untuk bergantung pada bahagian eksperimen, hala tuju ini adalah penting.Ia menandakan bahawa karusel, tab, komponen scrollspy dan corak UI yang serupa sedang dinaikkan taraf kepada "warganegara kelas pertama" dalam CSS, yang akan mengurangkan keperluan untuk kod gam JavaScript tersuai secara berterusan.

Hasil akhirnya adalah garis dasar yang lebih mantap untuk semua pengguna—termasuk orang yang melumpuhkan JS, bergantung pada teknologi bantuan, mempunyai peranti berkuasa rendah atau menyemak imbas dalam keadaan rangkaian yang tidak stabil. Widget tatal dan penggayaan CSS asli yang banyak menggunakan skrip trump dalam semua senario tersebut.

Menambah butang skrol dengan ::scroll-button()

Pada sesetengah platform, anda sudah melihat anak panah kecil di sebelah bar skrol, tetapi yang baru ::scroll-button() pseudo-element melangkah lebih jauh dan membolehkan CSS mentakrifkan butang "sebelumnya/seterusnya" khusus untuk sebarang kawasan boleh tatal—termasuk karusel.

Butang skrol yang ditakrifkan CSS ini bertindak berbeza daripada anak panah bar skrol sekolah lamaDaripada menggerakkan kandungan dalam sedikit peningkatan, ia melompat kira-kira 85% daripada kawasan yang kelihatan setiap klik. Dalam karusel sejajar snap lebar penuh, ia terasa hampir sama seperti butang navigasi setiap slaid.

Jika anda benar-benar memerlukan pergerakan satu item yang tepat, anda boleh menggabungkan pilihan penguncian skrolResipi biasa ialah scroll-snap-type: x mandatory pada bekas dan scroll-snap-stop: always pada setiap anak snap. Dengan cara itu, satu tekan butang skrol berkesan membawa anda dari satu kad ke kad seterusnya.

Dari perspektif sintaks, menambah butang skrol kelihatan seperti menggayakan elemen pseudo yang lainAnda memilih elemen boleh tatal (katakan, .carousel) dan sasaran ::scroll-button(left) or ::scroll-button(right) untuk mewakili kawalan ke belakang dan ke hadapan. Contoh minimum:

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

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

Nilai kandungan yang dipisahkan dengan garis miring membolehkan anda menyediakan label visual dan mudah diaksesPelayar kemudian mencipta fail sebenar <button> nod sebagai adik-beradik bagi kawasan skrol anda dan meletakkan kandungan anda di dalamnya. Anda kekal bebas untuk meletakkan dan menggayakannya mengikut kehendak anda, sama seperti elemen lain—menggunakan kedudukan mutlak, grid CSS atau kedudukan sauh.

Penggayaan fokus masih penting di siniContohnya, menggunakan peraturan seperti .carousel::scroll-button(*):focus-visible { outline-offset: 5px; } memastikan bahawa apabila pengguna menekan butang ini, mereka melihat cincin fokus yang jelas diimbangi daripada sempadan elemen, memelihara kebolehgunaan papan kekunci dan pematuhan WCAG.

Di sebalik hud, pelayar menjejaki keadaan butang dan julat tatal yang tersediaIni bermakna anda tidak perlu risau tentang melumpuhkan butang "sebelumnya" apabila anda berada di slaid pertama atau butang "seterusnya" di hujungnya; platform ini boleh mengendalikan keadaan tersebut dengan cara yang standard.

Penanda skrol dengan ::scroll-marker() untuk navigasi bulet atau label

Penanda visual—titik atau lakaran kecil di bawah karusel—hampir dijangkakan oleh pengguna pada masa kini. Baru ::scroll-marker() pseudo-element membolehkan anda menjana penunjuk tersebut dengan CSS sepenuhnya, setiap satu dipautkan kepada item tertentu dalam senarai boleh tatal.

Tidak seperti ibu jari bar skrol, penanda skrol mewakili titik minat semantikSetiap penanda bukan sahaja sepadan dengan kedudukan dalam piksel, tetapi juga dengan elemen anak sebenar, menjadikannya sesuai untuk senario seperti musim dalam siri TV, kategori produk atau bab logik dalam cerita dan bukannya setiap bingkai.

Penanda dipaparkan sebagai sah <a> unsur-unsur, memberikan anda dua ciri penting secara percuma: navigasi dalam halaman dan semantik yang betul untuk pembaca skrin. Ia berfungsi seperti pautan sauh, tetapi dengan beberapa penambahbaikan yang disesuaikan untuk penggunaan karusel.

Antara penambahbaikan tersebut ialah :target-current kelas pseudo, yang sepadan apabila item yang sepadan sedang dipaparkan atau dianggap sebagai "slaid aktif". Anda boleh menggunakannya untuk menyerlahkan penanda aktif dengan latar belakang atau sempadan yang berbeza.

Untuk menghubungkan ini, anda perlu menentukan dahulu di mana kumpulan penanda itu sepatutnya berada menggunakan scroll-marker-group sifat pada bekas, biasanya sebelum atau selepas penggulung. Contohnya, scroll-marker-group: after; akan meletakkan penanda selepas rantau karusel dalam DOM.

Kemudian anda menyasarkan kanak-kanak individu yang sepatutnya menjana penandaJika slaid anda <li> unsur-unsur, sesuatu seperti .carousel > li::scroll-marker akan cukup. Corak biasa adalah untuk mencipta titik kosong:

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

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

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

Pelayar web akan menguruskan penjanaan <a> penanda, mengumpulkannya ke dalam bekas ::scroll-marker-group khusus, dan mendedahkannya sebagai elemen boleh dinavigasi papan kekunci yang bertindak seperti kumpulan fokus. Pembaca skrin boleh membentangkannya secara serupa dengan senarai tab: anda mengalihkan fokus antara penanda dan mengaktifkannya untuk melompat ke slaid tertentu.

Penanda tidak terhad kepada titik. Anda boleh menetapkan content kepada nombor ("1", "2", dll.), label yang boleh dibaca manusia seperti “Musim 1” atau “Bab 3”, atau imej sebaris untuk mencipta galeri lakaran kecil bagi susun atur yang padat dengan foto seperti galeri produk e-dagang.

Menggabungkan butang, penanda dan strategi sandaran

Apabila anda mencampurkan butang skrol dan penanda di atas karusel skrol-snap, anda akan mendapat komponen yang terasa tidak dapat dibezakan daripada penyelesaian JS, tetapi lebih mudah diselenggara dan menghantar lebih sedikit bahagian yang bergerak. Pengguna boleh mengklik anak panah, mengetuk peluru, meleret pada skrin sentuh atau menggunakan navigasi papan kekunci—semuanya dengan tingkah laku yang konsisten.

Kombo ini juga menangani masalah prestasi dan UX yang biasaOleh kerana tiada skrip menyelaras perubahan slaid, anda tidak akan mendapat perubahan susun atur daripada manual. scrollLeft pelarasan atau pemasa yang diaktifkan pada waktu yang janggal. CLS (Cumulative Layout Shift) dikurangkan kerana pokok DOM sedia dari awal dan anda tidak menyuntik atau mengukur elemen di lewat kitaran hayat.

Walau bagaimanapun, terdapat satu kekurangan: ::scroll-button dan ::scroll-marker masih dalam percubaan dan pada masa ini hanya berada dalam Chrome 135+ di sebalik bendera eksperimen. Ini bermakna anda mesti mereka bentuk sandaran yang anggun jika anda merancang untuk menggunakannya di tapak pengeluaran.

Pengesanan ciri melalui @supports adalah sekutu terbaik anda di siniAnda boleh memaparkan bar navigasi tradisional—pautan ke #slide1, #slide2 dan begitulah seterusnya—secara lalai, kemudian sembunyikannya apabila kawalan natif tersedia. Corak konseptual kasar kelihatan seperti ini:

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

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

Dalam HTML, navigasi mudah dengan pautan sauh sudah memadai: setiap slaid mendapat id, dan navigasi menghala ke ID tersebut. Melompat ke sauh di dalam bekas skrol-jepret berintegrasi dengan baik dengan tingkah laku penjepretan, jadi slaid terpaut dengan kemas selepas lompatan.

Ini bermakna anda boleh menikmati manfaat pseudo-elemen eksperimen dalam menyokong pelayar—butang asli penuh, penanda dan cangkuk keadaan skrol—sambil masih menawarkan pengalaman berfungsi sepenuhnya di tempat lain. Tiada pengguna yang tersekat dengan gelangsar yang tidak boleh digunakan.

Selain itu, semua ini masih berfungsi apabila JavaScript dinyahdayakan, kerana anda bergantung sepenuhnya pada sauh HTML, tingkah laku tatal CSS dan enjin tatal pelayar. Untuk banyak corak UX—galeri, garis masa, pameran langkah demi langkah—itu sudah lebih daripada cukup.

Karusel main automatik CSS sahaja dengan animasi bingkai utama

Satu ciri biasa yang dijangkakan oleh orang ramai daripada karusel ialah main automatik—slaid mara secara automatik selepas beberapa saat. Walaupun ini sering dilaksanakan dengan pemasa JavaScript, anda juga boleh menganggarkan tingkah laku ini menggunakan animasi CSS tulen.

Caranya adalah untuk menganimasikan transformasi baris flex yang mengandungi semua slaidUntuk bilangan slaid yang tetap, anda menentukan garis masa bingkai utama di mana trek kekal pada setiap kedudukan slaid untuk seketika, kemudian melompat ke kedudukan seterusnya. Sesuatu seperti:

@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 gunakan animasi ini pada pembalut yang memegang elemen slaid anda, contohnya .autoplay-carousel { display: flex; animation: slide 12s infinite; }Julat peratusan menentukan masa "diam" pada setiap slaid supaya kandungan boleh dibaca sebelum beralih.

Adalah penting untuk menambah cara untuk pengguna menjeda main automatikCorak yang mudah tetapi berkesan ialah berhenti seketika semasa melayang dengan .autoplay-carousel:hover { animation-play-state: paused; }, supaya pengguna desktop boleh menghentikan gerakan apabila mereka berinteraksi dengan kandungan tersebut.

Pertimbangan kebolehcapaian lebih lanjut dengan pilihan pergerakanMenghormati prefers-reduced-motion dianggap sebagai amalan terbaik, jadi anda boleh melumpuhkan animasi sepenuhnya untuk pengguna yang lebih suka kurang gerakan:

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

Walaupun penyelesaian main automatik CSS tidak dapat mengendalikan semua kes tepi yang boleh dilakukan oleh JS dengan mudah—seperti kiraan slaid yang benar-benar dinamik atau logik jeda/sambung semula yang dipacu pengguna yang kompleks—ia mengejutkan kukuh untuk karusel statik yang mudah apabila anda ingin mengelakkan skrip sama sekali.

Membandingkan karusel CSS sahaja dan JavaScript

Memutuskan antara CSS dan JavaScript untuk karusel bukanlah cadangan semua atau tiada apa-apa; ia bergantung pada keperluan, khalayak dan bajet penyelenggaraan anda. Tetapi keseimbangan telah banyak berubah memihak kepada CSS untuk banyak senario dunia sebenar.

Dari perspektif prestasi, karusel CSS adalah pemenang yang jelasTiada penghuraian atau pelaksanaan kod pustaka, tiada pendengar peristiwa pada setiap interaksi skrol dan tiada pengiraan semula susun atur masa jalan yang dicetuskan oleh pelarasan skrip. Enjin skrol pelayar ditulis dalam kod asli yang sangat dioptimumkan dan ditala untuk segala-galanya daripada desktop mewah hingga telefon berkuasa rendah.

Dari segi kebolehcapaian, ciri karusel CSS baharu meningkatkan piawaian dengan ketaraButang dan penanda tatal yang disediakan oleh pelayar didatangkan dengan peranan ARIA, tingkah laku papan kekunci dan pengumuman yang perlu dicipta semula dengan teliti dalam JavaScript. Walaupun tanpanya, karusel tatal-jepret masih boleh diakses dengan peranan dan label.

Sebaliknya, JavaScript kekal berguna untuk corak yang sangat majuJika anda memerlukan logik main automatik yang rumit, cangkuk analitik, fizik tersuai atau untuk menyegerakkan berbilang karusel dengan keadaan kongsi (cth., imej utama ditambah baris lakaran kecil serta penomboran luaran), pendekatan berasaskan skrip masih boleh menjadi lebih fleksibel.

Walau bagaimanapun, pandangan utama ialah banyak karusel "seharian" sebenarnya tidak memerlukan tahap kerumitan ini.Galeri produk ringkas, gelangsar testimoni atau jalur "siaran pilihan" biasanya boleh dilaksanakan dengan snap skrol, beberapa peraturan CSS dan kawalan natif pilihan—menjimatkan anda daripada menggunakan kebergantungan 50KB hanya untuk beralih antara tiga slaid.

Pertimbangan lain ialah daya tahan apabila JavaScript gagalKarusel CSS sahaja akan berfungsi dengan sempurna jika JS disekat oleh proksi korporat, dipecahkan oleh penyekat iklan atau belum dimuatkan apabila pengguna tiba di halaman tersebut. Degradasi anggun seperti itu sukar dicapai dengan pustaka yang bergantung pada fasa permulaan selepas pemuatan halaman.

Amalan terbaik kebolehcapaian untuk karusel CSS

Walaupun pelayar membantu dengan beberapa aspek kebolehcapaian, anda masih memainkan peranan penting dalam menjadikan karusel CSS anda boleh digunakan oleh semua orang. Semantik, pengurusan fokus dan kepekaan gerakan semuanya harus berada di hadapan fikiran anda.

Pertama, berikan karusel mercu tanda yang sesuai. Membungkusnya dalam elemen dengan role="region" dan deskriptif aria-label seperti “Galeri produk” atau “Artikel pilihan” memudahkan pengguna pembaca skrin mencari dan memahaminya.

Setiap slaid juga boleh membawa label yang boleh diakses, contohnya melalui aria-label dengan menyatakan “Slaid 1 daripada 3”, “Slaid 2 daripada 3”, dan sebagainya. Dengan cara itu, apabila pengguna tiba di slaid, mereka mendapat konteks segera tentang kedudukan mereka dalam urutan tersebut.

Jangan lupa penunjuk fokus yang boleh dilihat. Mana-mana elemen interaktif—sama ada ia ::scroll-button, ::scroll-markerpautan yang dijana atau sauh manual dalam navigasi sandaran anda—memerlukan gaya fokus yang jelas yang melepasi garis panduan kontras dan tidak dialih keluar oleh tetapan semula global.

Jika anda menggunakan animasi autoplay atau dipacu skrol, hormati pilihan gerakan. Menggunakan prefers-reduced-motion Melumpuhkan atau memudahkan animasi bukanlah pilihan jika anda mengambil berat tentang pengguna yang terdedah kepada mabuk perjalanan, dan cukup mudah untuk membungkus kesan yang lebih kuat dalam pertanyaan media.

Akhir sekali, pertimbangkan saiz sasaran sentuhSama ada anda menggayakan penanda skrol natif atau pautan navigasi anda sendiri, pastikan kawasan interaktif sekurang-kurangnya sekitar 44×44 piksel CSS. Ini biasanya bermakna pelapik dan jarak yang luas dan bukannya bulatan kecil yang dipadatkan rapat antara satu sama lain.

Aliran kerja, alatan dan hala tuju masa hadapan dunia sebenar

Untuk memudahkan eksperimen dengan karusel CSS, sesetengah pasukan telah mencipta alatan pengkonfigurasi langsung tempat anda boleh menukar suis—dayakan butang tatal, togol penanda, laraskan mod snap—dan serta-merta melihat CSS terkini yang diperlukan untuk konfigurasi tersebut. Taman permainan ini sangat sesuai untuk pembelajaran dengan mengubah suai.

Bersama-sama dengan pengkonfigurasi, galeri demo karusel CSS sahaja yang dipilih susun mempamerkan apa yang mungkinAnda akan menemui corak seperti antara muka bertab, navigasi scrollspy, slaid berasaskan langkah, galeri lakaran kecil dan banyak lagi, semuanya berkongsi asas kawasan skrol yang sama serta kawalan snap dan pilihan.

Kebanyakan laman demo ini sengaja dihantar tanpa JavaScript untuk membuktikan perkara ini: UI yang kaya dan interaktif sepenuhnya boleh dicapai dengan HTML dan CSS sahaja. Mereka sering mendedahkan utiliti mereka melalui @layer pengisytiharan, supaya anda boleh memeriksa dan memilih gaya yang sesuai dengan sistem reka bentuk anda sendiri.

Menjelang masa hadapan, platform CSS telah pun mengusahakan dua laluan evolusi pentingYang pertama ialah "bawa elemen anda sendiri", di mana anda boleh memasangkan elemen anda sendiri dan bukannya bergantung pada butang dan penanda yang dijana oleh pelayar. <a> dan <button> markup, sambil masih mendapat manfaat daripada logik tatal yang mendasarinya.

Ini akan membuka pintu kepada kawalan berjenama dan bergaya mewah yang dibina dengan rangka kerja utiliti. seperti Tailwind, sambil mengekalkan semantik dan tingkah laku yang dikawal oleh platform. Anda pada asasnya akan menghiasi UI tetapi membiarkan pelayar kekal sebagai otak operasi.

Kawasan besar kedua ialah penatalan kitaran atau tanpa hadBanyak karusel hari ini "membalut" apabila anda sampai ke penghujungnya, berulang dengan lancar kembali ke slaid pertama. Melaksanakannya dengan bersih adalah rumit, selalunya melibatkan kandungan pendua atau logik yang kompleks. Sokongan peringkat platform untuk penatalan kitaran akan membolehkan pelayar mengendalikan tingkah laku pembalut dengan lebih elegan dan cekap.

Apabila ciri-ciri ini matang dan tersebar melangkaui Chrome ke dalam enjin lain, jurang antara apa yang boleh dilakukan oleh "karusel CSS asli" dan apa yang ditawarkan oleh pustaka JavaScript berat akan terus mengecil, menjadikan pendekatan bebas skrip sebagai titik permulaan lalai dan bukannya eksperimen kes pinggir.

Secara keseluruhannya, CSS moden memberi anda setiap sebab untuk memikirkan semula cara anda membina karuselBermula dengan susun atur tatal-jepret yang mudah, meletakkan butang dan penanda eksperimen di tempat yang disokong, dan menyelitkan amalan terbaik kebolehcapaian di seluruh bahagian, anda boleh memberikan gelangsar yang responsif, lancar dan mantap tanpa memerlukan kebergantungan JS. Bagi banyak projek, ini bermakna halaman yang lebih pantas, kurang kod untuk diselenggara dan pengalaman yang lebih berdaya tahan untuk setiap pengguna.