Tidak ada satu paket slider JavaScript yang cocok untuk WordPress tanpa build, Next.js dengan App Router, dan landing page vanilla sekaligus. Pilihan bergantung pada apakah Anda butuh carousel multi-slide, gallery lightbox, atau viewer zoom, lalu pada stack rendering, tingkat integrasi resmi, lisensi distribusi, dan cara library di-init setelah hydration. Snapshot registry dan dokumentasi resmi pada 1 November 2026 menempatkan Swiper 14.4.0, Embla Carousel 8.6.0, Splide 4.1.4, egjs Flicking 4.17.1, dan Swiffy Slider 2.1.2 sebagai shortlist modern yang developer frontend paling sering pertimbangkan.
Artikel ini membantu developer web, pembuat theme WordPress, dan technical lead menyaring kandidat sebelum menambah dependency npm atau enqueue skrip theme, bukan memberi ranking bintang GitHub. Jadi setiap langkah memilih slider JavaScript di bawah memakai legenda integrasi resmi (N), manual lewat JavaScript browser (J), wrapper komunitas (C), dan syarat khusus seperti client-only di SSR (K).
- Carousel menggeser beberapa item dalam satu viewport. Gallery/lightbox (PhotoSwipe, lightGallery) dan image viewer (Viewer.js) menyelesaikan masalah fullscreen/zoom yang berbeda.
- Swiper, Embla, Splide, dan Flicking memublikasikan wrapper resmi untuk React/Vue/Svelte (Embla juga Solid). Glide.js, Keen Slider, dan Swiffy Slider umumnya di-init manual di lifecycle framework.
- WordPress custom theme hampir selalu integrasi tingkat J: enqueue asset plus inisialisasi di browser, tanpa plugin resmi dari maintainer library inti.
- Embla dan Flicking keduanya mendokumentasikan pola SSR. Markup server-side tidak sama dengan interaktivitas penuh sebelum client mount.
- Flickity, lightGallery, dan FlexSlider membawa syarat GPL. Produk closed-source perlu menilai opsi lisensi komersial atau mengganti ke paket MIT.
Memilih Library Slider JavaScript: Urutan Keputusan
Mulai dari jenis UI, bukan dari nama library populer. Hero testimonial, strip produk, thumbnail sinkron, dan coverflow card slider masih termasuk carousel. Galeri foto dengan pinch-zoom fullscreen lebih dekat ke lightbox. Bila UX hanya butuh geser konten sederhana, CSS scroll-snap atau komponen native browser kadang cukup tanpa dependency berat, seperti diulas pada elemen HTML yang tidak lagi membutuhkan JavaScript.
Setelah jenis UI jelas, tentukan stack dan model rendering: vanilla/CDN, theme WordPress, React/Next.js, Vue/Nuxt, Angular, Svelte/SvelteKit, atau jalur jQuery legacy. Kemudian bandingkan tingkat integrasi resmi, dokumentasi aksesibilitas, lisensi manifest npm, aktivitas rilis, dan ukuran bundle entry default (satu sinyal, bukan bukti Core Web Vitals).
Beda Carousel, Gallery, dan Viewer
Carousel mempertahankan beberapa slide dalam viewport dan menggeser fokus antar item. Lightbox membuka satu media ke lapisan di atas halaman dengan navigasi antarfile. Viewer.js fokus pada zoom, rotasi, dan flip pada satu gambar. PhotoSwipe (MIT, v5.4.4 pada snapshot) cocok untuk gallery zoom dengan contoh React resmi. Namun status wrapper Vue/Svelte perlu Anda cek ulang di docs maintainer sebelum production. lightGallery v3 memakai dual-license GPL-3.0-only atau komersial dan tetap aktif dirilis, tetapi tim harus membaca implikasi lisensi sebelum rekomendasi produksi.
GLightbox, baguetteBox.js, Viewer.js, dan basicLightbox menargetkan viewer/lightbox ringan. Viewer.js masih aktif dirilis (1.15.2 pada snapshot) bila fokus zoom/rotate satu gambar, bukan strip multi-slide. Jangan memilih kategori lightbox lalu memaksa API carousel untuk perilaku fullscreen zoom.
Anda boleh memasang carousel dan lightbox berdampingan, misalnya strip thumbnail Swiper yang membuka PhotoSwipe saat pengguna mengklik thumbnail. Tetap hitung bundle, listener keyboard, dan pola ARIA keduanya secara terpisah.
Kode Integrasi: Resmi, Manual, dan Bersyarat
N (native/official) berarti maintainer menerbitkan paket npm, komponen, atau halaman integrasi resmi. J (JavaScript integration) berarti library vanilla atau jQuery bisa Anda enqueue di WordPress, Laravel Blade, atau halaman statis asalkan browser menjalankan inisialisasi. C (community) menandai modul pihak ketiga terverifikasi, contohnya embla-carousel-angular atau nuxt-swiper. K (conditional) berarti kompatibel dengan syarat: directive client di Next.js, Swiper Element dengan CUSTOM_ELEMENTS_SCHEMA di Angular, atau runtime React di block Gutenberg.
Kolom jQuery pada matriks riset menilai plugin jQuery resmi, bukan halaman yang kebetulan memuat jQuery. Slick 2.0, Owl Carousel 2, bxSlider, FlexSlider, dan lightSlider adalah plugin jQuery asli. Swiper, Splide, dan Embla tidak menawarkan adapter jQuery resmi dari maintainer.
Shortlist Slider JavaScript Modern (November 2026)
Lima kandidat berikut menerima pemeriksaan ulang versi npm dan halaman docs pada 1 November 2026. Angka bundle mengacu estimasi entry default min+gzip (metodologi seragam, bukan hasil tree-shaking modul di proyek Anda).
| Library | Versi snapshot | Lisensi | Integrasi resmi | Kapan masuk shortlist |
|---|---|---|---|---|
| Swiper | 14.4.0 | MIT | React, Vue, Web Components (Swiper Element) | Fitur lengkap, efek, modul, dan ekosistem luas |
| Embla Carousel | 8.6.0 (v9 RC) | MIT | React, Vue, Svelte, Solid | Headless engine, markup/style milik tim, docs SSR |
| Splide | 4.1.4 | MIT | React, Vue 3, Svelte | Halaman aksesibilitas Splide dan opsi keyboard terdokumentasi |
| egjs Flicking | 4.17.1 | MIT (cek LICENSE repo) | React, Vue 2/3, Angular, Svelte | Adapter lintas framework plus panduan SSR Next.js/Nuxt |
| Swiffy Slider | 2.1.2 | MIT | Vanilla (JS ~1,3 KB gzip di docs) | CSS-first, CDN/jsDelivr, markup server-rendered dulu |
Keen Slider (~5,9 KB gzip entry default) layak diuji bila motion native-feel prioritas, meski rilis npm terakhir Juli 2023 menaikkan risiko maintenance. Glide.js stabil dengan rilis November 2024. Splide memiliki rilis GitHub v4.1.3 September 2022 sementara paket npm tetap 4.1.4. Lantaran itu aktivitas repo perlu Anda cek sebelum komitmen jangka panjang.
Slider JavaScript di WordPress
PHP di server tidak menjalankan carousel. Meski begitu, kompatibilitas WordPress berarti cara mengirim CSS/JS ke template. Pola standar mengikuti dokumentasi enqueue WordPress: wp_enqueue_style dan wp_enqueue_script dengan dependency jquery bila perlu, lalu inisialisasi Swiper atau Splide lewat inline script yang hanya dimuat pada template terkait. Tidak ada plugin resmi dari tim Swiper, Splide, atau Embla di WordPress.org untuk library inti.
Untuk theme custom yang menekan LCP, urutan praktis: Swiffy Slider (markup slide dari server), Swiper via CDN resmi, Splide untuk kebutuhan a11y terdokumentasi. Muat skrip hanya pada template yang memakai carousel, bukan global di functions.php. Hero slider sering memengaruhi LCP, jadi diagnosis performa tetap relevan sebelum menambah library berat, seperti pada panduan LCP WordPress lambat padahal plugin cache sudah aktif.
Block Gutenberg berjalan di React. Block interaktif dapat memakai embla-carousel-react, swiper/react, pure-react-carousel, atau Nuka Carousel di build @wordpress/scripts. Shortcode front-end publik masih bisa memakai vanilla Swiffy, Splide, atau Swiper lewat enqueue tingkat J.
Page builder dan addon sering menarik carousel sendiri meski halaman tidak menampilkan slider. Audit beban JavaScript pihak ketiga sejalan dengan temuan page builder WordPress paling ringan 2026 sebelum menumpuk library kedua di theme custom.
React, Next.js, dan Hydration
Carousel mengukur lebar slide di DOM. Akhirnya, inisialisasi di server hampir selalu salah untuk interaktivitas penuh. Pola aman: render markup slide di server, panggil library setelah mount (useEffect, onMounted, atau komponen client). Wrapper Swiper React, Embla React, Splide React, dan Flicking React mengikuti aturan itu.
Embla memublikasikan dokumentasi server-side rendering dan plugin SSR untuk React, Vue, Svelte, dan Solid. Panduan SSR Flicking membahas pergeseran panel setelah hydration di Next.js/Nuxt. Keduanya bukan jaminan nol warning tanpa uji build production.
Untuk App Router Next.js, urutan proof-of-concept yang wajar: Embla (headless, core ~6,9 KB gzip), Swiper (fitur paling lengkap), Flicking (adapter Angular kuat plus SSR terdokumentasi). Semua membutuhkan boundary client. react-multi-carousel mengklaim prop ssr, tetapi jejak maintenance perlu diverifikasi per versi sebelum produksi.
Arsitektur headless memindahkan UI ke front-end terpisah sementara WordPress mengirim data melalui REST atau GraphQL. Pola init client-side sama, hanya lokasi build yang bergeser. Tim yang memisahkan CMS dan lapisan presentasi perlu menguji carousel di repositori front-end, bukan hanya di theme PHP, agar bundle dan hydration terukur di environment yang sama dengan production.
Swiper v9+ menghapus komponen Angular dan Svelte resmi. Jalur resmi sekarang Swiper Element (Web Component), termasuk pola CUSTOM_ELEMENTS_SCHEMA di Angular. Selanjutnya Nuxt umumnya memakai modul komunitas nuxt-swiper yang berbasis web component tersebut.
Vue, Nuxt, Angular, dan Svelte
Vue 3: Swiper (swiper/vue), Embla (embla-carousel-vue), Splide (@splidejs/vue-splide), vue3-carousel 0.19.0 (rilis Oktober 2026), plus Flicking @egjs/vue3-flicking. Nuxt UI membangun komponen Carousel resmi di atas Embla, bukan fork terpisah.
Angular: Flicking @egjs/ngx-flicking adalah adapter resmi penuh. Swiper Element plus schema custom element menjadi alternatif resmi Swiper. Embla memiliki embla-carousel-angular dari komunitas dengan aktivitas commit Juni 2026.
Svelte: Embla, Flicking, dan Splide punya wrapper resmi. Paket svelte-carousel dorman sejak April 2023 dan belum diverifikasi untuk Svelte 5 runes. Untuk SvelteKit baru, Embla atau Splide umumnya lebih aman dari segi pemeliharaan.
Swiper, Embla, dan Kapan Headless Lebih Tepat
Swiper menawarkan modul efek, thumbs, virtual slides, dan Swiper Element untuk konsumsi di luar React/Vue murni. Tim yang ingin slider hero dengan banyak opsi animasi dan dokumentasi modul siap pakai biasanya uji Swiper lebih dulu. Trade-off-nya footprint default lebih besar dan surface API luas, sehingga import selektif modul penting agar bundle produksi tidak meniru angka entry default Bundlephobia.
Embla sengaja headless: engine mengurus scroll snap dan index, sementara markup tombol prev/next, pagination, dan gaya visual entirely milik Anda. Pola ini cocok bila design system sudah punya komponen button dan layout grid, atau bila shadcn/ui dan Nuxt UI Carousel menjadi referensi tim. Embla tidak menghemat pekerjaan aksesibilitas otomatis. Anda yang menentukan tab order, label ARIA, dan announcement screen reader.
Splide menempati tengah: komponen lebih opinionated daripada Embla, dengan halaman aksesibilitas dan opsi keyboard yang eksplisit. Bila tim ingin balance antara custom markup dan panduan a11y resmi, Splide layak masuk POC bersama Swiper dan Embla. Jangan anggap rilis GitHub 2022 berarti mati tanpa melihat issue tracker dan npm publish terbaru.
Flicking unggul bila satu codebase harus melayani React, Vue 2/3, Angular, dan Svelte dengan adapter resmi dari NAVER egjs, plus dokumentasi panel shift setelah hydration. Entry bundle default terlihat besar karena dependency @egjs ikut di entry default, sehingga ukur bundle setelah konfigurasi build nyata.
Swiffy Slider tetap menarik untuk landing page statis: HTML slide dapat dirender penuh di server, JavaScript hanya menambah navigasi keyboard dan autoplay opsional. Jangan anggap CSS-first otomatis memenangkan Core Web Vitals tanpa mengukur hero image dan font blocking pada template Anda.
Library React Khusus dan Bootstrap Carousel
pure-react-carousel, Nuka Carousel, react-slick, dan react-multi-carousel tetap relevan bila Anda hanya target React dan ingin API komponen yang sudah tersegmentasi (Slide, Dot, ButtonBack). Nuka menekankan aksesibilitas dengan renderAnnouncements. react-slick membungkus Slick sehingga jejak jQuery masih terasa di dependency tree meski API React.
Pilih library React-only hanya bila tidak ada rencana membagikan carousel ke halaman PHP WordPress atau embed vanilla. Bila rencana lintas surface (marketing site WordPress plus app React), general-purpose engine dengan wrapper resmi (Embla, Swiper, Splide) mengurangi duplikasi pengetahuan tim.
Bootstrap Carousel (MIT, Bootstrap 5.3.x) masuk akal bila CSS Bootstrap sudah menjadi fondasi proyek dan kebutuhan hanya slideshow sederhana tanpa gesture kompleks. Bootstrap bukan pengganti Swiper untuk coverflow atau virtual loop, tetapi beban tambahan kecil bila framework CSS memang wajib ada.
Vanilla, CDN, dan jQuery Legacy
Laravel, CodeIgniter, dan PHP native hanya merender HTML slide dan URL asset. Swiffy Slider, Swiper, Splide, Glide.js, dan Bootstrap Carousel semua rating J di front-end. Pembedaan WordPress vs Laravel relevan untuk siapa yang mengelola template, bukan runtime carousel.
Tanpa bundler, dokumentasi Swiper, Swiffy Slider (jsDelivr quick start), Splide, dan unduhan resmi Flickity mendukung self-host atau CDN. Namun paket React-only seperti pure-react-carousel tidak cocok dimuat langsung di browser tanpa build step.
Proyek legacy yang masih bergantung jQuery 4 dapat mempertimbangkan Slick 2.0 (rilis 2026, MIT) alih-alih Owl Carousel 2 yang dorman sejak 2018. Owl, bxSlider, FlexSlider, dan lightSlider dikelompokkan maintenance-only atau legacy, bukan default proyek greenfield.
Rekomendasi per Stack dan Use Case
| Stack / use case | Kandidat uji pertama | Kode integrasi | Catatan |
|---|---|---|---|
| WordPress theme tanpa build | Swiffy Slider, Swiper, Splide | J | Conditional enqueue per template |
| React / Next.js App Router | Embla, Swiper, Flicking | N + client mount | Embla dan Flicking docs SSR, tetap uji hydration |
| Vue 3 / Nuxt | Swiper, Embla, vue3-carousel | N / C | Nuxt UI Carousel built on Embla |
| Angular | Flicking, Swiper Element | N / K | Custom elements schema untuk Swiper |
| jQuery maintenance | Slick 2.0, bxSlider | N plugin jQuery | Bukan rekomendasi stack baru |
| Gallery zoom fullscreen | PhotoSwipe, lightGallery | N vanilla + React/Vue | Bukan substitut carousel multi-item |
Tabel merangkum titik awah shortlist, bukan pemenang absolut. Bobot fitur, lisensi, dan beban bundle berbeda per proyek.
Lisensi, Pemeliharaan, dan Keamanan Dependency
Mayoritas carousel populer memakai MIT atau Apache-2.0. Pengecualian penting: Flickity v3 (GPL-3.0 plus lisensi komersial Metafizzy), lightGallery v3 (GPL-3.0-only OR LicenseRef-Commercial), FlexSlider (GPL-2.0, tidak dipelihara sejak 2019). Theme atau SaaS closed-source yang membundle kode GPL perlu penilaian legal internal, bukan nasihat hukum dari artikel ini.
Kelompok sangat aktif pada snapshot: Swiper, Flicking, Embla (v9.0.0-rc04 Oktober 2026), vue3-carousel, lightGallery, Viewer.js, Slick revival 2.x, pure-react-carousel, Nuka, Swiffy Slider. Kelompok dorman atau rendah: Tiny Slider (2021), Flickity (2022), Keen Slider (2023), Owl Carousel 2, Siema, lory.js, FlexSlider, lightSlider. Versi npm terbaru saja tidak membuktikan maintenance sehat tanpa membaca changelog, issue response, dan peer dependency.
Pemeriksaan terbatas snapshot ini bukan audit keamanan dependency tree. Wording aman: tim belum menemukan advisory spesifik untuk daftar kandidat pada tanggal pemeriksaan. Walau begitu jalankan audit npm/yarn/pnpm di pipeline proyek sebelum production.
Performa, LCP, Aksesibilitas, dan Bundle
Slide pertama sering menjadi kandidat LCP. Render markup slide pertama dari server, beri width dan height eksplisit, dan hindari menyembunyikan slide pertama dengan display:none saat lazy-load agar CLS terkendali. Autoplay dan animasi transform membebani pengguna yang sensitif motion. Tidak ada library di shortlist yang menangani prefers-reduced-motion secara otomatis penuh. Anda perlu mematikan autoplay atau mengganti animasi di CSS.
Untuk keyboard dan screen reader, Splide (halaman aksesibilitas resmi), Embla (panduan ARIA headless), Nuka (renderAnnouncements di React), dan modul a11y Swiper memberi titik awal terdokumentasi. WCAG compliance tetap bergantung markup, tombol pause, dan fokus yang Anda bangun, terutama pada carousel headless.
Estimasi bundle entry default (November 2026, metodologi seragam): Swiper ~20,5 KB gzip, Splide ~15,8 KB, Embla core ~6,9 KB, Flicking ~38,6 KB gzip karena dependency @egjs ikut terhitung pada entry default. Angka bundle bukan bukti LCP, INP, atau CLS lebih baik. Uji di staging dengan profil throttling dan gambar hero nyata.
Inisialisasi client-side berinteraksi dengan crawler dan SEO JavaScript. Bila carousel memuat konten penting setelah mount, pastikan markup awal tetap terbaca, sejalan praktik pada JavaScript SEO dan pemeriksaan client-side rendering.
Checklist UAT Sebelum Production
Keyboard: tab masuk ke kontrol prev/next, fokus terlihat, dan slide aktif terbaca screen reader. Uji dengan VoiceOver/NVDA minimal satu browser. Screen reader: pastikan slide count dan slide aktif diumumkan, bukan hanya perubahan visual. Reduced motion: nonaktifkan autoplay bila prefers-reduced-motion aktif. Hydration: build production Next.js/Nuxt tanpa warning mismatch pada markup slide. CLS/LCP/INP: ukur di PageSpeed Insights atau WebPageTest dengan hero image nyata, bukan placeholder 1×1 pixel.
Lazy loading: slide di luar viewport boleh lazy-load gambar, tetapi slide pertama harus eager dengan dimensi eksplisit. Lifecycle: destroy instance saat route change atau unmount komponen. Fallback tanpa JavaScript: pertimbangkan scroll-snap CSS atau tautan ke halaman detail bila carousel adalah satu-satunya jalur navigasi produk.
Modernisasi Theme dan Proof-of-Concept
Theme lama yang masih memuat Owl Carousel atau FlexSlider sering jadi sumber konflik jQuery ganda. Namun refactor bertahap ke Splide atau Swiffy plus conditional enqueue lebih aman daripada menumpuk library baru di atas plugin lama. Setiap penggantian library harus diuji di staging dengan plugin page builder dan widget lama masih aktif, karena asset carousel sering doble load dari theme dan addon.
Sebelum mengunci dependency, buka dokumentasi integrasi resmi untuk stack Anda, bukan README fork lama. Cek field types di manifest npm bila proyek TypeScript. Di WordPress, uji dengan jQuery disabled pada block theme modern untuk memastikan tidak ada ketergantungan tersembunyi. Di Next.js, jalankan build production dan pastikan tidak ada hydration warning pada komponen carousel.
Saat unmount di SPA, panggil metode destroy instance Swiper, Embla, atau Flicking agar listener tidak menumpuk. Setelah AJAX atau infinite scroll, panggil ulang init atau API update() yang didokumentasikan Swiper dan Flicking untuk konten dinamis.
Pilih dua atau tiga kandidat dari shortlist, bangun proof-of-concept dengan slide dan gambar nyata, lalu ukur LCP, keyboard flow, dan ukuran bundle aktual setelah import modul yang benar-benar dipakai. Versi stabil dapat bergeser setelah 1 November 2026. Ulangi cek dokumentasi integrasi resmi setiap major upgrade dependency carousel.
Bila carousel sudah memengaruhi LCP, menimbulkan layout shift, konflik asset, atau hydration error berulang, audit implementasi front-end lebih berguna daripada berganti nama library tanpa mengubah pola muat skrip dan markup hero. Tim yang butuh bantuan audit atau refactor theme WordPress dapat menghubungi layanan pengembangan web melalui situs CodeF.
