Cara menggunakan Generator Slider & Carousel
- Pilih pustaka — Swiper, Splide, Glide.js atau Slick — lalu isi slide: panel demo, URL gambar sendiri, atau kartu.
- Atur jumlah slide per tampilan untuk desktop, tablet, dan mobil, serta jarak, efek, loop, autoplay, panah, dan penanda halaman.
- Periksa pratinjau langsung pada lebar desktop, tablet, dan mobil.
- Salin HTML, CSS, dan JavaScript (CDN atau npm), atau unduh halaman HTML lengkap.
Buat slider tanpa menghafal opsi
Setiap pustaka carousel punya puluhan opsi dengan nama yang berbeda: slidesPerView milik Swiper sama dengan perPage di Splide, perView di Glide, dan slidesToShow di Slick. Generator ini memberimu satu set kontrol dan menulis konfigurasi yang tepat untuk pustaka pilihanmu — termasuk breakpoint responsif, yang masing-masing pustaka definisikan dengan cara berbeda (Swiper memakai min-width dengan pendekatan mobile-first, Splide dan Glide memakai max-width dengan pendekatan desktop-first, dan Slick memakai array responsive).
Pustaka slider mana yang sebaiknya dipakai?
| 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 | Geser, fade, cube, coverflow, flip, cards, creative | Geser, fade | Geser | Geser, fade |
| Vertikal | Ya | Ya | Tidak | Ya |
| Aksesibilitas | Baik (modul a11y) | Sangat baik (ARIA bawaan) | Dasar | Dasar |
| Dikelola | Ya | Ya | Lambat | Tidak (rilis terakhir 2017) |
| Lisensi | MIT untuk keempatnya | |||
Swiper adalah pilihan paling populer dan paling lengkap — pakai itu kecuali kamu butuh yang sangat ringan. Splide lebih ringan dan aksesibilitasnya paling baik bawaan. Glide.js adalah yang paling kecil untuk carousel sederhana. Slick masih umum di situs lama dan tema WordPress, tetapi bergantung pada jQuery dan sudah tidak dikembangkan, jadi pilih hanya untuk menyesuaikan proyek yang sudah ada.
Tips performa dan aksesibilitas
- Lazy-load gambar di bawah slide pertama (
loading="lazy"sudah ditambahkan otomatis) dan sesuaikan ukurannya dengan lebar slide — pengubah ukuran gambar dan kompresor bisa membantu. - Hindari autoplay untuk konten penting; jika tetap dipakai, biarkan jeda saat disorot kursor aktif dan atur jeda minimal 4 detik.
- Biarkan panah dan penanda halaman aktif agar pengguna keyboard dan pembaca layar tetap bisa bernavigasi.
- Carousel di layar pertama bisa merugikan Largest Contentful Paint — pastikan gambar pertama tidak di-lazy-load jika itu elemen LCP-mu.
Panduan khusus pustaka: Swiper, Splide, Glide.js, dan Slick. Untuk Webflow, tempel HTML ke elemen Embed dan script sebelum </body>.
Juga dicari sebagai: generator slider, generator carousel, pembuat slider gambar, kode slider responsif, contoh carousel html, carousel javascript, generator kode slider.
Tool yang cocok dipakai bersama Generator Slider & Carousel
- Editor HTML Online — Playground kode yang ringan: edit HTML, CSS dan JavaScript berdampingan, lihat hasilnya seketika, baca output console, dan unduh halaman kamu sebagai satu file HTML.
- Generator Gradient CSS — Rancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu salin CSS siap pakai dengan warna solid sebagai fallback.
- Generator Animasi CSS — Desain animasi CSS di atas timeline keyframe sungguhan.
- Generator CSS Keyframes — Editor visual untuk @keyframes.
Pertanyaan yang sering diajukan
Pustaka slider mana yang terbaik?
Bisakah saya memakai kodenya di WordPress atau Webflow?
</body>.