Cara menggunakan Generator Splide Slider
- Pilih opsi untuk slider Splide dan isi slide: panel demo, URL gambar sendiri, atau kartu.
- Atur jumlah slide per tampilan untuk desktop, tablet, dan mobile, lalu jarak, efek, loop, autoplay, panah, dan pagination.
- Cek pratinjau langsung pada lebar desktop, tablet, dan mobile.
- Salin HTML, CSS, dan JavaScript (CDN atau npm), atau unduh halaman HTML lengkap.
Tentang Splide
Splide adalah slider tanpa dependensi dengan ukuran sekitar 12 KB (min + gzip) dan dikenal karena aksesibilitasnya. Splide otomatis menambahkan role ARIA, label, live region, dan dukungan keyboard, mengikuti pola carousel WAI-ARIA. Splide juga mendukung mode loop dan fade, autoplay dengan tombol putar/jeda, lazy loading, slider vertikal, serta ekstensi seperti auto-scroll dan video.
Opsi yang dibuat generator
| Opsi | Arti |
|---|---|
type | slide, loop, atau fade (fade menampilkan satu slide; gunakan rewind untuk membuatnya berputar) |
perPage, gap | Jumlah slide per halaman dan jarak sebagai panjang CSS |
breakpoints | Desktop-first: 1023: { perPage: 2 } berlaku hingga 1023 px |
autoplay, interval, pauseOnHover | Pemutaran otomatis |
focus: 'center' | Membuat slide aktif berada di tengah |
direction: 'ttb' + height | Slider vertikal (tinggi tetap wajib) |
drag: 'free' | Mode geser bebas dengan momentum |
Gaya Splide
Impor splide.min.css (atau CSS inti untuk kontrol penuh), lalu timpa .splide__arrow dan .splide__pagination__page.is-active. CSS yang dihasilkan generator melakukan ini dengan warna aksenmu.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Ukuran (min + gzip, JS) | ~40 KB (bundel) | ~12 KB | ~7 KB | ~12 KB + jQuery ~30 KB |
| Dependensi | Tidak ada | Tidak ada | Tidak ada | jQuery |
| Efek | Slide, fade, cube, coverflow, flip, cards, creative | Slide, fade | Slide | Slide, fade |
| Vertikal | Ya | Ya | Tidak | Ya |
| Aksesibilitas | Baik (modul a11y) | Sangat baik (ARIA bawaan) | Dasar | Dasar |
| Dipelihara | Ya | Ya | Lambat | Tidak (rilis terakhir 2017) |
| Lisensi | MIT untuk keempatnya | |||
Juga dicari sebagai: cara membuat slider splide, carousel splide js, splide slider generator, splide autoplay, splide breakpoints, splide cdn, carousel responsif.
Tool yang cocok dipakai bersama Generator Splide Slider
- Generator Slider & Carousel — Atur carousel dengan klik, tanpa harus membaca dokumentasi: pilih pustaka, atur breakpoint, efek, dan kontrol, lihat pratinjau langsung, lalu salin HTML, CSS, dan JavaScript yang siap pakai.
- Generator Swiper Slider — Atur Swiper 11 lewat editor visual — breakpoint responsif, efek, autoplay, tipe pagination, dan lainnya — lalu salin HTML, CSS, dan JavaScript yang siap pakai.
- Generator Glide.js — Buat carousel Glide.js yang minimalis — slider ~7 KB tanpa dependensi — dengan breakpoint responsif, panah dan bullet, lalu salin kodenya.
- Cek Kontras Warna — Masukkan warna teks dan latar belakang untuk mendapatkan rasio kontras WCAG yang akurat, hasil lulus/gagal untuk setiap level, skor APCA, dan perbaikan sekali klik yang tetap mempertahankan hue kamu.
Pertanyaan yang sering diajukan
Mengapa efek fade di Splide hanya menampilkan satu slide?
Tipe fade selalu menampilkan satu slide per halaman. Gunakan tipe slide atau loop untuk menampilkan beberapa slide.
Apakah breakpoint Splide berbasis min-width atau max-width?
Secara bawaan max-width (desktop-first). Atur
mediaQuery: 'min' untuk beralih ke mobile-first.Apakah Splide ramah aksesibilitas?
Ya. Secara bawaan Splide menerapkan atribut ARIA, navigasi keyboard, dan pengumuman untuk pembaca layar. Inilah keunggulan utamanya.
Bisakah saya memasang Generator Splide Slider sebagai aplikasi web dan memakainya offline?
Bisa. Generator Splide Slider adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.