Cipta karusel CSS lanjutan tanpa JavaScript

Laman Utama » Python » Cipta karusel CSS lanjutan tanpa JavaScript

Membina karusel dengan CSS moden bukan lagi impian semata-mata—ia merupakan pilihan yang sangat nyata dan sedia untuk pengeluaran yang selalunya boleh mengatasi pustaka gelangsar JavaScript klasik. Terima kasih kepada ciri-ciri seperti penjepretan skrol, animasi dipacu skrol, pseudo-elemen karusel eksperimen dan primitif kebolehcapaian yang mantap, anda boleh menghantar karusel yang ringan dan berdaya tahan yang masih terasa lancar, interaktif dan digilap.

Jika anda bosan memasukkan pakej JavaScript 50KB hanya untuk menunjukkan beberapa slaid, panduan ini membimbing anda melalui apa yang CSS hari ini boleh lakukan untuk anda. Kami akan menghuraikan konsep utama di sebalik karusel CSS sahaja, cara menghubungkannya dengan scroll-snap, bila perlu bergantung pada yang baharu ::scroll-button() dan ::scroll-marker() pseudo-elemen, dan cara menyelitkan main automatik atau tingkah laku bulat sambil tetap melayan kebolehcapaian dan prestasi sebagai warga kelas pertama.

Mengapa karusel CSS sahaja akhirnya menjadi pilihan yang serius

Selama bertahun-tahun, "karusel" hampir sinonim dengan "plugin JavaScript"Penyelesaian seperti Swiper, Glide atau slider buatan sendiri adalah pendekatan pilihan: ia mengendalikan navigasi, keadaan, sokongan papan kekunci dan gerak isyarat sentuh, tetapi dengan kos tambahan, pendengar acara di mana-mana dan sejumlah besar gimnastik DOM.

CSS moden telah menutup sebahagian besar jurang itu secara senyap-senyapDengan sifat-sifat seperti scroll-snap-type dan scroll-snap-align, anda boleh menukar mana-mana penatal mendatar atau menegak kepada pengalaman berhalaman. Selain itu, spesifikasi CSS Overflow Level 5 memperkenalkan pelayar yang dihasilkan butang tatal dan penanda yang berkelakuan seperti UI karusel yang mempunyai ciri lengkap, tetapi diisytiharkan sepenuhnya dalam CSS.

Kemenangan besar ialah pelayar, bukan kod JavaScript anda, menjadi bertanggungjawab untuk kebimbangan teras UX: fizik penatalan, navigasi papan kekunci, susunan fokus dan juga peranan ARIA untuk kawalan karusel. Dalam banyak kes, adalah benar-benar sukar untuk membina sesuatu yang lebih mudah diakses dan berprestasi lebih baik daripada apa yang platform kini berikan kepada anda secara langsung.

Satu lagi kelebihan utama karusel CSS ialah daya tahanJika JavaScript gagal dimuatkan, pengguna yang skripnya disekat atau dilumpuhkan masih mendapat set item yang boleh ditatal dengan sempurna. Tiada penghidratan, tiada perubahan susun atur yang disebabkan oleh kod yang dimuatkan lewat dan jauh lebih sedikit bahagian bergerak yang boleh menjadi salah dari semasa ke semasa.

Blok binaan teras: bekas boleh tatal dengan Scroll Snap

Setiap karusel CSS sahaja bermula sebagai bekas boleh tatal biasaFikirkan senarai mudah slaid yang boleh ditatal secara mendatar. Dari situ, anda menambah snap skrol supaya port paparan terkunci secara semula jadi pada setiap slaid.

Struktur HTML minimum untuk karusel mendatar sengaja dibuat ringkas: elemen pembalut dan satu siri item slaid di dalamnya. Anda mungkin menggunakan ul bersama li unsur-unsur, atau div dengan anak divs—CSS melakukan kerja-kerja berat, jadi anda tidak memerlukan kelas khas untuk setiap kanak-kanak melainkan reka bentuk anda memerlukannya.

Persediaan scroll-snap asas boleh kelihatan seperti ini dalam CSS, dengan mengandaikan paparan slaid tunggal 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 bekas itu menggunakan display: flex untuk menyusun anak-anaknya secara mendatar, dan overflow-x: auto untuk mendayakan penatalan. Keajaibannya ada pada scroll-snap-type: x mandatory, yang memberitahu pelayar bahawa tatal mendatar harus sentiasa berada pada titik snap yang sah, dan dalam scroll-snap-align: center pada setiap slaid, yang mentakrifkan titik snap tersebut.

Gabungan flexbox dan scroll snap ini serta-merta terasa seperti karusel: pengguna menatal atau meleret, dan slaid terdekat akan terpasang pada tempatnya. Oleh kerana ia memanfaatkan penatalan asli, input sentuh pada telefon dan tablet hanya berfungsi, tanpa sebarang pengendali gerak isyarat atau perpustakaan tambahan.

Anda tidak terhad kepada satu item setiap paparanUntuk karusel berbilang lajur yang memaparkan beberapa kad sekaligus, anda boleh menggunakan lebar fleksibel untuk item, contohnya:

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

Variasi ini membolehkan anda memaparkan, katakan, tiga kad setiap viewport dengan sedikit jarak, sambil masih mendapat manfaat daripada tingkah laku snapping. Pengguna meluncur melalui halaman kad dan bukannya slaid wira tunggal, yang berfungsi dengan baik untuk senarai produk atau galeri.

Butang skrol dengan elemen pseudo ::scroll-button()

Sebaik sahaja anda mempunyai penggulung snap, perkara seterusnya yang kebanyakan orang mahukan ialah butang navigasi eksplisit—kawalan sebelumnya dan seterusnya yang menggerakkan karusel ke kiri atau kanan. Secara tradisinya, anda akan mencipta <button> elemen, peristiwa klik ikat dan kira sejauh mana untuk menatal.

Spesifikasi CSS Overflow 5 memperkenalkan ::scroll-button(), elemen pseudo yang membolehkan pelayar melakukan semua kerja berat ituWalaupun ini kini tersedia bermula dalam Chrome 135 (dan biasanya di sebalik bendera eksperimen pada mulanya), ia merupakan gambaran sekilas tentang bagaimana karusel akan dihasilkan pada masa hadapan.

Anda mengisytiharkan butang skrol dengan cara yang sama seperti yang anda lakukan terhadap mana-mana elemen pseudo yang lainContohnya, untuk menjana butang kiri dan kanan untuk karusel anda:

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

Apabila CSS ini digunakan, pelayar sebenarnya mencipta <button> elemen sebagai adik-beradik bekas skrol, menghubungkannya dengan penatal, memberikan peranan yang sesuai dan menghubungkan tingkah lakunya. Satu klik biasanya menatal sekitar 85% kawasan tatal, yang terasa seperti "halaman" dalam kebanyakan susun atur karusel.

Jika reka bentuk anda menjangkakan tepat satu item lebar penuh setiap klik, anda boleh menggabungkan elemen pseudo ini dengan snapping yang lebih ketat pada setiap anak dengan menambah scroll-snap-stop: alwaysItu memaksa port pandangan untuk mendarat di sempadan item dan bukannya berhenti di pertengahan.

Harta kandungan di sini berfungsi berganda: nilai pertama ialah apa yang dilihat oleh pengguna secara visual (dalam kes ini, aksara anak panah), dan rentetan kedua ialah teks sandaran yang boleh diakses yang boleh didedahkan kepada teknologi bantuan. Anda bebas untuk menggayakan dan meletakkan butang ini dengan CSS atau menggunakan fungsi seperti anchor() untuk menyelaraskannya dengan tepat dengan susun atur anda.

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

Titik atau label di bawah karusel—sering dipanggil "bulet penomboran halaman" atau "penanda"—adalah satu lagi keperluan biasaIa menunjukkan bilangan item yang wujud dan yang mana satu sedang kelihatan, dan ia membenarkan pengguna melompat terus ke slaid tertentu.

. ::scroll-marker() pseudo-element memberikan anda petunjuk ini tanpa menjana pautan atau rentang sauh secara manualSetiap penanda pada asasnya merupakan navigasi <a> elemen yang dicipta oleh pelayar, yang menunjuk ke item tatal yang sepadan dan mengambil bahagian dalam navigasi papan kekunci dan pembaca skrin.

Untuk menyediakannya, anda memberitahu pelayar tempat untuk meletakkan kumpulan penanda bersama scroll-marker-group, dan pada elemen mana untuk mencipta penanda. Konfigurasi minimum boleh kelihatan seperti ini:

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

Pelayar membina ::scroll-marker-group bekas sebagai adik-beradik kepada penggulung dan mengisinya dengan satu penanda untuk setiap anak yang dipilihDalam contoh mudah ini, penanda dipaparkan sebagai titik kosong, tetapi anda boleh menggunakan teks seperti "Musim 1", ikon atau lakaran kecil dengan mudah dengan menukar content harta.

Apakah yang menjadikan penanda ini istimewa berbanding bar skrol biasa ialah ia merupakan pautan navigasi sebenar. Ia membolehkan pengguna melompat terus ke kedudukan yang bermakna, dan ia didatangkan dengan semantik yang berguna: terdapat :target-current keadaan yang menunjukkan penanda yang sepadan dengan slaid yang sedang dilihat atau dirakam. Sokongan papan kekunci bertindak seperti kumpulan fokus dan pembaca skrin boleh mendedahkannya sebagai kawalan seperti senarai tab.

Strategi ini amat berkesan apabila penggulung anda mewakili bahagian logik dan bukannya item individuContohnya, daripada mencipta sepuluh penanda untuk sepuluh episod, anda mungkin mencipta dua penanda yang melompat ke permulaan musim pertama dan musim kedua. Anda bebas untuk memutuskan "perkara menarik" yang harus ditangani.

Menggabungkan butang dan penanda ke dalam UI karusel penuh

Apabila anda meletakkan ::scroll-button() dan ::scroll-marker() bersama-sama pada penggulung yang sama, anda akan mendapat UI yang pengguna serta-merta kenal pasti sebagai karusel: kawalan sebelumnya/seterusnya, deretan penanda yang menunjukkan sejauh mana ia berada dan penguncian lancar antara slaid.

Perbezaan utama daripada slider JavaScript klasik ialah kebanyakan logik ini kini berada dalam pelayarButang dan penanda merupakan elemen yang dijana dengan peranan ARIA yang betul, disepadukan dengan betul ke dalam susunan tab dan kisah kebolehcapaian yang direka oleh pasukan pelayar asas dan bukannya dicipta semula untuk setiap tapak.

Pendekatan ini membawa beberapa faedah yang sangat praktikal: ia berfungsi dengan JavaScript dilumpuhkan, menghapuskan kerlipan penghidratan dan isu pemasaan, mengurangkan Anjakan Tata Letak Kumulatif kerana kawalan diketahui pada masa susun atur CSS dan disepadukan dengan lancar dengan animasi dipacu skrol atau pertanyaan keadaan skrol sekiranya anda ingin menambah gaya.

Pada peranti sentuh, pengalamannya mesra jari secara semula jadi kerana bekas skrol masih merupakan skrol natif. Pada desktop, roda tetikus dan input papan kekunci berfungsi seperti yang dijangkakan dan penunjuk fokus pada kawalan yang dijana boleh digayakan untuk memenuhi garis panduan reka bentuk dan kebolehcapaian anda.

Dari perspektif penyelenggaraan, "lakukan kurang, capai lebih banyak" menjadi gambaran yang agak tepatDaripada mengekalkan logik berbilang pelaksanaan karusel merentasi projek, anda bergantung pada ciri platform yang dikongsi dan diseragamkan yang akan terus bertambah baik dari semasa ke semasa tanpa sebarang kerja tambahan di pihak anda.

Menjadikan Scroll Snap berfungsi dalam projek sebenar

Walaupun anda mengabaikan elemen pseudo baharu seketika, tatal-snap sahaja sudah cukup baik untuk banyak karusel pengeluaranSokongan pelayar untuk skrol-jepret merentasi enjin moden adalah kukuh dan kelakuannya boleh diramal dengan roda tetikus dan gerak isyarat sentuh.

Dalam senario paling mudah, karusel HTML anda mungkin merupakan div dengan beberapa siri imej di dalamnyaAnda boleh memberikan kelas seperti pada bekas itu .carousel dan biarkan imej anak tidak dikelaskan; CSS mengendalikan penjajaran dan penatalan.

Dengan menghidupkan scroll-behavior: smooth pada bekas, penatalan antara titik snap menjadi animasi yang menyenangkan dan bukannya melompat-lompat. Ini amat ketara apabila pengguna mengklik penanda atau pautan sauh atau apabila anda mencetuskan tatal secara pengaturcaraan dalam persediaan hibrid.

Setiap sifat tatal-jepret kekunci memainkan peranan yang sangat berbeza. scroll-snap-type mentakrifkan paksi dan sama ada pemukulan adalah wajib atau sekadar petunjuk; scroll-snap-align pada kanak-kanak menentukan di mana mereka terkunci dalam pandangan (mula, tengah, tamat); dan scroll-snap-stop: always menghalang pelayar daripada melangkau titik snap semasa menatal dengan cepat.

Digunakan bersama, ciri-ciri ini membolehkan anda menentukan dengan tepat bagaimana karusel sepatutnya terasa—daripada snap yang lembut dan mudah difahami, sesuai untuk bahagian kandungan yang besar, kepada tingkah laku slaid demi slaid yang ketat, sesuai untuk sepanduk wira di mana anda tidak mahu berada "di antara" item.

Oleh kerana ini adalah CSS tulen, anda boleh menyesuaikan susun atur dengan mudah secara responsifDengan pertanyaan media, tukar daripada satu slaid setiap paparan pada skrin sempit kepada beberapa slaid setiap paparan pada desktop lebar, hanya dengan menukar flex-basis item. Tiada titik putus JavaScript, saiz semula pendengar atau lebar yang dikira semula diperlukan.

Unsur pseudo eksperimen dan pengesanan ciri

Unsur pseudo berorientasikan karusel baharu—::scroll-button(), ::scroll-marker() dan ::scroll-marker-group—berkuasa tetapi masih agak segarPada masa penulisan ini, ia tersedia dalam Chrome 135 dan yang lebih baharu, selalunya dengan bendera eksperimen diperlukan, dan ia akan dilancarkan ke enjin lain dari semasa ke semasa.

Oleh kerana sokongan belum universal, tapak pengeluaran harus bergantung pada pengesanan ciri dan sandaran yang anggunCSS memberi anda @supports at-rule, yang membolehkan anda menggunakan peraturan secara bersyarat berdasarkan pengecaman harta.

Anda mungkin mentakrifkan jalur navigasi sandaran mudah—satu set pautan atau butang yang terletak di bawah karusel—dan kemudian menyembunyikan jalur tersebut apabila pelayar menyokong butang tatal natif. Contohnya:

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

Di sini .carousel-nav boleh mengandungi pautan sauh yang ditulis sendiri yang menghala ke slaid melalui ID, seperti <a href="#slide1">1</a>Pada pelayar yang memahami sifat butang tatal baharu, kawalan natif anda dipaparkan dan navigasi sandaran tersembunyi; pada pelayar lama, navigasi sauh kekal, digandingkan dengan tatal tatal untuk pengalaman yang boleh digunakan dengan sempurna.

Strategi hibrid ini menjadikannya selamat untuk bereksperimen dengan ciri karusel generasi akan datang hari ini, tanpa mengunci diri anda ke dalam konfigurasi enjin atau bendera tertentu. Apabila sokongan pelayar matang, anda boleh lebih bergantung pada elemen pseudo dan memangkas beberapa perancah manual.

Karusel main automatik CSS sahaja dengan animasi bingkai utama

Satu lagi permintaan biasa ialah main automatik—karusel yang bergerak maju sendiri, secara pilihan berhenti seketika apabila dilayangkanWalaupun main automatik mempunyai beberapa kaveat UX dan kebolehcapaian, ia boleh dicapai semata-mata dengan animasi CSS.

Corak mudah adalah untuk menganimasikan terjemahan mendatar trek slaid 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, kerangka utama menghabiskan sebahagian besar masa pada setiap ofset sebelum beralih ke slaid seterusnyaTrek tersebut berulang pada penghujungnya, memberikan penampilan tayangan slaid berulang di atas empat slaid. Mengarahkan tetikus ke atas karusel akan menjeda animasi supaya pengguna boleh memeriksa kandungan tanpa melawan pergerakan yang berterusan.

Untuk menghormati pengguna yang lebih suka pergerakan yang dikurangkan atas sebab kesihatan atau keselesaan, anda boleh membungkus animasi dalam pertanyaan media:

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

Ini memastikan bahawa pada sistem yang memerlukan gerakan yang dikurangkan, slaid kekal statik, melumpuhkan main automatik secara berkesan sambil masih membenarkan navigasi tatal manual atau butang/penanda jika disediakan.

Satu pertukaran penting ialah main automatik berasaskan bingkai utama tidak disepadukan dengan skrol-snap secara automatikAnda menterjemahkan kandungan secara manual dan bukannya bergantung pada skrol natif, jadi anda perlu mereka bentuk animasi dengan teliti untuk mengelakkan slaid separuh kelihatan dan memastikan pemasaan selaras dengan susun atur anda.

Pertimbangan kebolehcapaian untuk karusel CSS

Kebolehcapaian merupakan bidang di mana karusel berasaskan CSS benar-benar boleh menyerlah, kerana banyak logik berat beralih daripada kod tersuai anda kepada tingkah laku platform yang telah direka bentuk dan diuji dengan teliti.

Apabila anda bergantung pada penatalan asli serta tatal-jepret, anda secara automatik mewarisi sokongan papan kekunci, sentuh dan tetikusPengguna boleh membuka tab pada skrol, menggunakan kekunci anak panah untuk bergerak, leret pada skrin sentuh dan skrol dengan roda, tanpa sebarang pendengar peristiwa atau pengendali tersuai.

Butang dan penanda tatal eksperimental melangkah lebih jauhPelayar menciptanya dengan semantik yang sesuai, mengintegrasikannya ke dalam susunan tab dan mengekalkan keadaannya, menjadikannya sangat sukar untuk secara tidak sengaja melupakan atribut ARIA atau salah melabelkannya. Kawalan karusel yang terhasil cenderung lebih mudah diakses secara konsisten berbanding pelaksanaan yang dilancarkan di rumah.

Anda boleh dan masih harus menambah petunjuk semantik pada kawasan karusel andaContohnya, menandakan bekas dengan role="region" dan deskriptif aria-label membantu pengguna pembaca skrin 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 penunjuk fokus yang boleh dilihat untuk semua elemen interaktif kekal pentingSama ada kawalannya ialah butang dan pautan anda sendiri atau elemen pseudo yang dijana pelayar, pastikan garisan fokus tidak dialih keluar atau dibuat terlalu halus untuk dilihat. Laraskan outline, outline-offset atau perubahan latar belakang mengikut keperluan untuk memenuhi keperluan kontras.

Saiz sasaran sentuh merupakan satu lagi pertimbangan praktikalSasarkan kawalan yang sekurang-kurangnya 44×44px untuk mematuhi garis panduan kebolehcapaian biasa, supaya pengguna tidak bersusah payah mengetik anak panah atau titik pada skrin yang lebih kecil.

Untuk sebarang fungsi main automatik, berikan kawalan yang jelas kepada pengguna dan elakkan pergerakan yang terlalu agresif. Sediakan butang jeda semasa berlegar atau butang jeda eksplisit dan pertimbangkan untuk mematikan automain lalai jika kandungannya padat atau banyak teks. Digabungkan dengan prefers-reduced-motion, ini menjadikan karusel anda lebih selesa untuk khalayak yang lebih luas.

Mengendalikan penatalan bulat atau "tak terhingga" dengan CSS

Satu tingkah laku yang sering diminta oleh orang ramai ialah penatalan bulat: apabila anda sampai ke slaid terakhir dan menatal lebih jauh, anda kembali ke slaid pertama dengan lancar, seperti karusel fizikal yang berputar tanpa henti.

Hari ini, tiada sifat CSS langsung dan tulen yang menjadikan bekas skrol berbentuk bulat secara semula jadiTanpa menduplikasi kandungan, penatal natif akan mempunyai permulaan dan pengakhiran: sebaik sahaja anda sampai ke item terakhir, penatalan selanjutnya tidak akan menggerakkan anda ke hadapan.

Penulis spesifikasi sedar bahawa banyak karusel UI menjangkakan tingkah laku gelung ini, dan terdapat minat aktif dalam meneroka penyelesaian peringkat platform untuk penatalan kitaran, sepertimana butang dan penanda tatal baharu diseragamkan. Walau bagaimanapun, pada masa ini anda tidak boleh meminta pelayar untuk membalut kedudukan tatal secara asli dengan satu deklarasi CSS.

Dalam persediaan CSS semata-mata, simulasi gelung biasanya bermaksud menganimasikan transformasi (seperti dalam contoh kerangka utama main automatik) atau menerima penghujung linear pada urutanJika infiniti yang lancar amat diperlukan dan anda tidak boleh menduplikasi kandungan, JavaScript masih merupakan alat yang lebih fleksibel buat masa ini.

Berita baiknya ialah tiada apa yang menghalang anda daripada menggabungkan karusel yang kebanyakannya dipacu CSS dengan sedikit JavaScript di mana ia benar-benar menambah nilai.Anda mungkin bergantung pada butang scroll-snap dan CSS untuk navigasi harian, kemudian tambahkan beberapa baris skrip untuk memerhatikan kedudukan skrol dan beralih dari hujung ke hujung apabila sesuai.

HTML/CSS berbanding JavaScript untuk karusel berasaskan kad yang kaya

Dilema yang kerap berlaku bagi pembangun baharu ialah sama ada karusel kad yang lebih kompleks "mesti" ditulis dalam JavaScriptOrang ramai sering membayangkan bahawa sebaik sahaja anda melangkah melangkaui imej mudah kepada kad responsif dengan pelbagai komponen, CSS sahaja tidak lagi berdaya maju.

Dalam praktiknya, CSS scroll-snap berfungsi dengan baik untuk kad kaya seperti juga untuk imej biasaSelagi setiap kad merupakan blok di dalam bekas skrol, anda boleh memasangnya, menganimasikannya dan melapisi gaya tambahan di atasnya. Tajuk, butang, cebisan teks dan juga media terbenam tidak mengubah mekaniknya secara asasnya.

JavaScript menonjol dalam tingkah laku bersyarat dan keadaan kompleksJika karusel anda mesti menapis kad secara dinamik, menyusun semula slaid, menyegerakkan dengan komponen lain, mengambil kandungan baharu dengan pantas atau menyokong logik yang sangat disesuaikan (“jika titik ini diklik, tunjukkan kad yang sama sekali tidak berkaitan”), maka JavaScript boleh menyatakan logik perniagaan tersebut dengan lebih mudah berbanding CSS sahaja.

Walau bagaimanapun, sebilangan besar slider harian yang mengejutkan pada dasarnya adalah senarai item statik yang maju secara linearBagi kes tersebut, menggunakan beberapa baris CSS dan bukannya mengimport pustaka JS yang besar adalah lebih mudah untuk dipertimbangkan dan lebih baik untuk prestasi. Memahami scroll-snap dan pseudo-elemen yang lebih baharu membolehkan anda menempah JavaScript untuk kes-kes yang jarang berlaku di mana ia benar-benar berbaloi.

Jika anda masih mempelajari pembangunan bahagian hadapan, melayan karusel CSS sebagai garis asas lalai anda adalah satu tabiat yang baik.Mulakan dengan HTML dan CSS, dan hanya gunakan skrip apabila anda mencapai had yang jelas. Ini mengajar anda lebih lanjut tentang apa yang platform sudah boleh lakukan dan selalunya membawa kepada pangkalan kod yang lebih ramping dan bersih.

Berundur ke belakang, set CSS yang muncul menampilkan ciri-ciri sekitar penatalan, petik, butang, penanda dan pertanyaan keadaan tatal telah mengubah karusel daripada widget yang banyak skrip kepada komponen deklaratif. Dengan bergantung pada scroll-snap untuk tingkah laku paging teras, menggunakan ::scroll-button() dan ::scroll-marker() Jika disokong, dan menggunakan amalan terbaik pengesanan dan kebolehcapaian ciri, anda boleh menghantar karusel yang pantas, mantap dan lebih mudah diselenggara daripada slider berpacu JS tradisional—sambil mengekalkan fleksibiliti yang mencukupi untuk digabungkan dalam JavaScript jika logik kitaran atau interaksi lanjutan benar-benar memerlukannya.