Cara menggunakan Generator Slick Slider
- Pilih opsi untuk slider Slick dan isi slide-nya: panel demo, URL gambar sendiri, atau kartu.
- Atur jumlah slide untuk desktop, tablet dan mobile, jarak, efek, loop, autoplay, panah, dan paginasi.
- Periksa pratinjau langsung pada lebar desktop, tablet dan mobile.
- Salin HTML, CSS, dan JavaScript (CDN atau npm), atau unduh halaman HTML lengkap.
Tentang Slick
Slick (“the last carousel you’ll ever need”) adalah carousel jQuery bawaan selama bertahun-tahun dan masih tertanam di banyak tema WordPress, toko Shopify, dan situs lama. Slick mendukung breakpoint responsif, center mode, fade, geser vertikal, lazy loading, dan autoplay. Rilis terakhirnya (1.8.1) berasal dari 2017 dan membutuhkan jQuery.
Opsi Slick
| Opsi | Arti |
|---|---|
slidesToShow / slidesToScroll | Jumlah slide yang terlihat dan berapa yang bergeser per klik |
responsive | Array dari { breakpoint, settings }; masing-masing berlaku di bawah lebar breakpoint |
infinite | Membuat slide berputar tanpa henti |
autoplay, autoplaySpeed | Pemutaran otomatis dan jedanya |
fade | Transisi silang (satu slide per waktu) |
centerMode | Memusatkan slide aktif dengan tetangga yang terpotong |
Jarak antar slide
Slick tidak punya opsi jarak. CSS yang dihasilkan menambahkan margin horizontal pada .slick-slide dan margin negatif pada .slick-list agar tepi luarnya tetap sejajar.
Masih perlu pakai Slick?
Untuk situs yang sudah memakai jQuery dan Slick, tetap konsisten dengan itu masuk akal. Untuk proyek baru, Swiper atau Splide lebih kecil, masih dirawat, lebih aksesibel, dan tidak butuh jQuery. Ganti pustaka di atas dan generator akan mengonversi pengaturanmu.
| 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 |
| Terawat | Ya | Ya | Lambat | Tidak (rilis terakhir 2017) |
| Lisensi | MIT untuk keempatnya | |||
Juga dicari sebagai: slick slider, slick carousel, contoh slick slider, slick responsive, slick autoplay, jquery carousel, slick cdn, cara membuat slider slick.
Tool yang cocok dipakai bersama Generator Slick 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 Splide Slider — Bangun carousel Splide yang ringan dan mudah diakses tanpa membaca dokumentasi.
- 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.
Pertanyaan yang sering diajukan
Apakah Slick butuh jQuery?
Bagaimana cara menambah jarak antar slide Slick?
.slick-slide dan margin negatif yang sesuai pada .slick-list; generator menuliskannya otomatis dari nilai jarak.