Cara menggunakan Generator Swiper Slider
- Pilih opsi untuk slider Swiper dan isi konten slide: panel demo, URL gambar sendiri, atau kartu.
- Atur slide per tampilan untuk desktop, tablet, dan mobile, lalu jarak, efek, loop, autoplay, panah, dan pagination.
- Cek pratinjau langsung di lebar desktop, tablet, dan mobile.
- Salin HTML, CSS, dan JavaScript (CDN atau npm), atau unduh halaman HTML lengkap.
Tentang Swiper
Swiper adalah slider sentuh yang paling banyak dipakai di web: tanpa framework, dipercepat perangkat keras, dan lengkap dengan modul — navigasi, pagination, autoplay, keyboard, mousewheel, free mode, lazy loading, aksesibilitas, dan tujuh efek transisi. Versi 11 tersedia sebagai satu bundle untuk CDN atau sebagai ES modules dari npm.
Opsi utama yang ditulis generator ini
| Opsi | Fungsinya |
|---|---|
slidesPerView + breakpoints | Slide yang terlihat sekaligus; breakpoint bersifat mobile-first (768: { slidesPerView: 2 } berlaku mulai dari 768 px ke atas) |
spaceBetween | Jarak antar slide dalam px |
loop | Loop tanpa henti; Swiper 11 butuh minimal slidesPerView × 2 slide agar loop berjalan mulus |
autoplay | delay, pauseOnMouseEnter, dan disableOnInteraction: false agar autoplay lanjut setelah digeser |
effect | fade (dengan crossFade), cube, coverflow, flip, cards, creative |
pagination.type | bullets, fraction, atau progressbar |
Gaya
Swiper membaca variabel CSS --swiper-theme-color untuk panah dan bullet aktif; warna aksen yang kamu pilih ditulis di sana. Variabel lain mencakup --swiper-navigation-size dan --swiper-pagination-bullet-size.
Menggunakan npm dan framework
Ubah opsi instalasi ke npm untuk mendapatkan import Swiper from 'swiper/bundle'. Di React, Vue, atau Svelte kamu bisa memakai Swiper Element (web components) atau komponen React resmi dengan opsi yang sama sebagai props.
| 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: cara membuat swiper slider, swiper js generator, contoh swiper carousel, swiper breakpoints, swiper autoplay, swiper cdn, swiper coverflow, generator carousel js.
Tool yang cocok dipakai bersama Generator Swiper 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 Splide Slider — Bangun carousel Splide yang ringan dan mudah diakses tanpa membaca dokumentasi.
- Generator Glide.js — Buat carousel Glide.js yang minimalis — slider ~7 KB tanpa dependensi — dengan breakpoint responsif, panah dan bullet, lalu salin kodenya.
- Pengubah Ukuran Gambar — Ubah ukuran foto ke dimensi piksel atau persentase tertentu, crop agar pas dengan ukuran media sosial, atau muatkan gambar ke dalam bingkai dengan warna latar — semuanya diproses langsung di browser kamu.
Pertanyaan yang sering diajukan
Kenapa loop Swiper tidak berfungsi?
Bagaimana cara kerja breakpoint Swiper?
Bagaimana cara mengubah warna panah?
--swiper-theme-color pada slider (warna aksen melakukan ini otomatis), atau beri gaya pada .swiper-button-next dan .swiper-button-prev.