Cara menggunakan Generator Glide.js
- Pilih opsi untuk slider Glide.js dan isi slide: panel demo, URL gambar sendiri, atau kartu.
- Atur jumlah slide per tampilan untuk desktop, tablet, dan ponsel, serta jarak, efek, loop, autoplay, panah, dan penomoran.
- Periksa pratinjau langsung pada lebar desktop, tablet, dan ponsel.
- Salin HTML, CSS, dan JavaScript (CDN atau npm), atau unduh halaman HTML lengkap.
Tentang Glide.js
Glide.js adalah slider ES6 yang sangat kecil (sekitar 7 KB min + gzip) dan tanpa dependensi, dibangun di atas CSS transform. Fokusnya pada fitur esensial — perView, gap, breakpoint, autoplay, geser, dan keyboard — sementara markup dan gaya sepenuhnya kamu yang atur. Cocok dipakai saat ukuran halaman lebih penting daripada efek.
Istilah Glide
| Opsi | Arti |
|---|---|
type: 'carousel' | Loop tanpa henti (menggandakan slide) |
type: 'slider' | Berhenti di slide pertama dan terakhir |
perView, gap | Jumlah slide yang terlihat dan jarak dalam px |
focusAt: 'center' | Memusatkan slide yang aktif |
breakpoints | Berbasis max-width: 767: { perView: 1 } |
data-glide-el="controls" | Hook markup untuk panah (data-glide-dir="<") dan bullet (controls[nav]) |
Yang tidak dilakukan Glide
Glide tidak punya efek fade, vertikal, atau 3D, dan fitur aksesibilitasnya masih dasar — tambahkan aria-label pada kontrol (markup yang dihasilkan sudah menyertakannya). Jika kamu butuh fitur tersebut, ganti generator ke Swiper atau Splide; pengaturanmu akan ikut terbawa.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Ukuran (min + gzip, JS) | ~40 KB (bundle) | ~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 secara default) | Dasar | Dasar |
| Dipelihara | Ya | Ya | Lambat | Tidak (rilis terakhir 2017) |
| Lisensi | MIT untuk keempatnya | |||
Juga dicari sebagai: glide js, glidejs carousel, contoh glide slider, carousel glide js ringan, glide js breakpoint responsif, generator slider glide js, cara membuat slider glide js, glide js tanpa jquery.
Tool yang cocok dipakai bersama Generator Glide.js
- 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 Splide Slider — Bangun carousel Splide yang ringan dan mudah diakses tanpa membaca dokumentasi.
- Minifier JavaScript — Tempel kode JavaScript dan dapatkan kode hasil minify siap produksi dari Terser, mesin yang sama dengan Vite, webpack, dan Rollup, lengkap dengan perbandingan sebelum dan sesudah serta ukuran gzip.
Pertanyaan yang sering diajukan
Apakah Glide.js mendukung slider fade atau vertikal?
Tidak. Glide hanya menggeser secara horizontal. Gunakan Swiper atau Splide untuk efek fade, vertikal, atau 3D.
Kenapa bullet Glide saya tidak berfungsi?
Wadah bullet membutuhkan
data-glide-el="controls[nav]" dan satu tombol per slide dengan data-glide-dir="=index" — HTML yang dihasilkan generator sudah menyertakan keduanya.Apakah Glide.js masih dipelihara?
Glide stabil dan masih banyak dipakai, meski rilisnya jarang. Karena tidak punya dependensi, library ini tetap berjalan dengan baik.
Bisakah saya memasang Generator Glide.js sebagai aplikasi web dan memakainya offline?
Bisa. Generator Glide.js 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.