Mulai | Dokumentasi | Demo
Swiper
Swiper - adalah slider sentuh seluler yang gratis dan paling modern dengan transisi dipercepat perangkat keras dan perilaku asli yang luar biasa. Ini dimaksudkan untuk digunakan di situs web seluler, aplikasi web seluler, dan aplikasi asli/hybrid seluler.
Swiper tidak kompatibel dengan semua platform, ini adalah slider sentuh modern yang hanya difokuskan pada aplikasi/platform modern untuk membawa pengalaman dan kesederhanaan terbaik.
Sponsor
Fitur
- Tree-shakable : Hanya modul yang Anda gunakan yang akan diimpor ke bundel aplikasi Anda.
- Mobile-Friendly : Ini dimaksudkan untuk digunakan di situs web seluler, aplikasi web seluler, dan aplikasi asli/hybrid seluler.
- Perpustakaan Agnostik : Swiper tidak memerlukan perpustakaan JavaScript seperti JQuery, yang membuat Swiper jauh lebih kecil dan lebih cepat. Ini dapat digunakan dengan aman dengan perpustakaan seperti jQuery, zepto, jQuery Mobile, dll.
- 1: 1 Gerakan sentuh : Secara default, Swiper menyediakan interaksi gerakan sentuh 1: 1, tetapi rasio ini dapat dikonfigurasi melalui pengaturan swiper.
- Mutation Observer : Swiper memiliki opsi untuk memungkinkan pengamat mutasi, dengan fitur ini swiper akan secara otomatis diinisialisasi ulang dan menghitung ulang semua parameter yang diperlukan jika Anda membuat perubahan dinamis pada DOM, atau dalam gaya swiper itu sendiri.
- API Rich : Swiper hadir dengan API yang sangat kaya. Ini memungkinkan membuat pagination Anda sendiri, tombol navigasi, efek paralaks dan banyak lagi.
- RTL : Swiper adalah satu -satunya slider yang menyediakan dukungan RTL 100% dengan tata letak yang benar.
- Layout Slide Multi Row : Swiper memungkinkan tata letak beberapa baris, dengan beberapa slide per kolom.
- Efek transisi : fade, flip, 3d cube, 3D coverflow.
- Kontrol dua arah : Swiper dapat digunakan sebagai pengontrol untuk sejumlah swiper lainnya, dan bahkan dikendalikan pada saat yang sama.
- Kontrol Navigasi Penuh : Swiper hadir dengan semua elemen navigasi bawaan yang diperlukan, seperti pagination, panah navigasi dan scrollbar.
- Layout Flexbox : Swiper menggunakan tata letak Flexbox modern untuk tata letak Slide, yang memecahkan banyak masalah dan waktu dengan ukuran caclulasi. Tata letak semacam itu juga memungkinkan mengkonfigurasi kisi slide menggunakan CSS murni.
- Slide Layout Grid yang paling fleksibel : Swiper memiliki banyak parameter pada inisialisasi untuk membuatnya sefleksibel mungkin. Anda dapat mengontrol slide per tampilan, per kolom, per grup, ruang di antara slide, dan banyak lagi.
- Gambar Lazy Loading : Swiper malas memuat penundaan pemuatan gambar dalam slide tidak aktif/tidak terlihat sampai pengguna menggeseknya. Fitur seperti itu dapat membuat halaman memuat lebih cepat dan meningkatkan kinerja swiper.
- Virtual Slide : Swiper hadir dengan fitur virtual slide yang bagus ketika Anda memiliki banyak slide atau slide konten-berat/berat-gambar sehingga hanya akan menjaga jumlah slide yang diperlukan di DOM.
- Mode loop
- Autoplay
- Kontrol keyboard
- Kontrol Mousewheel
- Slider bersarang
- Navigasi Sejarah
- Navigasi hash
- Konfigurasi Breakpoints
- Aksesibilitas (A11Y)
- Dan banyak lagi ...
Masyarakat
Komunitas Swiper dapat ditemukan pada diskusi GitHub, di mana Anda dapat mengajukan pertanyaan, ide suara, dan berbagi proyek Anda
Kode perilaku kami berlaku untuk semua saluran komunitas Swiper.
Dist / Build
Pada produksi menggunakan file (JS dan CSS) hanya dari dist/
Folder, akan ada versi yang paling stabil.
Pembangunan pembangunan
Instal semua dependensi, di root repo:
Dan membangun versi pengembangan Swiper:
Hasilnya tersedia di dist/
Folder.
Menjalankan demo:
Semua demo terletak di folder ./playground
. Di sana Anda akan menemukan Core (HTML, JS), React, Vue versi. Untuk membuka demo, jalankan:
- Inti :
npm run core
- Bereaksi :
npm run react
- Vue :
npm run vue
Pembangunan produksi
Versi produksi akan tersedia di dist/
Folder.
Berkontribusi
Semua perubahan harus berkomitmen hanya pada src/
file. Sebelum Anda membuka masalah, tinjau pedoman yang berkontribusi.
Fitur Roadmapped Utama
- Permintaan fitur teratas (tambahkan suara Anda sendiri menggunakan? Reaksi)
- Bug top? (Tambahkan suara Anda sendiri menggunakan? Reaksi)
Kontributor
Kontributor Kode
Proyek ini ada berkat semua orang yang berkontribusi. [Menyumbang].
Kontributor keuangan
Menjadi kontributor keuangan dan bantu kami mempertahankan komunitas kami. [Menyumbang]