Fitur Lory Carousel Slider CSS Animasi & Dukungan Sentuh

Dari semua plugin korsel online Saya harus memberi tip topi saya Lory. Itu seperti konsep sederhana tapi itu mudah salah slider paling kuat di web.

Itu versi yang diperkecil total sekitar 7KB yang tidak kecil tapi pasti tidak buruk untuk slider carousel yang mendukung sentuhan.

Anda dapat menambahkan plugin ini ke situs web mana pun karena itu berjalan di jQuery atau JS vanilla biasa. Itu bisa berjalan dengan tidak ada ketergantungan yang bagus untuk kompatibilitas.

Lory juga salah satu dari sedikit plugin itu tidak menurun di browser yang lebih lama. Nya didukung penuh di IE10+, dan versi yang lebih lama masih dapat menjalankan slider, cukup tanpa animasi dan sedikit tambahan.

Anda harus melakukannya lakukan semua pemrograman terprogram sendiri jika Anda ingin menambahkan konten tetapi itu Sangat sederhana. Anda dapat menentukan seberapa besar untuk membuat setiap panel, berapa lama untuk menghidupkan, dan bagaimana menangani browser responsif.

Lihat beranda Lory untuk Kode sumber dan detail tentang pengaturan.

Mulailah dengan menambahkan perpustakaan Lory JS ke situs Anda kepala bagian, baik sebagai plugin jQuery atau perpustakaan vanilla. Semua versi saat ini di-host di Cloudflare CDN, jadi sangat mudah untuk memasukkan salinan tanpa unduhan apa pun.

Dengan file JavaScript terinstal, Anda akan ingin membuat daftar tanpa daftar HTML dengan konten slide, tetapi Lory hadir dengan beberapa kelas standar jadi itu baik untuk tetap dengan model mereka.

Ini beberapa Kode sampel diambil dari repo Lory GitHub utama:

Sekarang di jQuery (atau JS biasa), Anda bisa mengatur panggilan fungsi. Seharusnya terlihat seperti ini:

 $ ('. js_slider'). lory (infinite: 1);

Perhatikan tak terbatas Opsi hanyalah salah satu dari banyak fitur yang dapat Anda sesuaikan. Dan Anda selalu dapat mengubah .js_slider kelas sesuai dengan kebutuhan Anda.

Saat mengembangkan dengan plugin ini Anda mungkin memiliki banyak pertanyaan penyesuaian. Saya akan sangat merekomendasikan browsing dokumentasi yang ada di bagian paling bawah halaman GitHub.

Mungkin bukan lokasi terbaik untuk dokumen tetapi untungnya mereka cukup kecil. Anda hanya punya sekitar 10 opsi untuk menyesuaikan dan mungkin 10-12 acara berbeda Anda dapat bermain-main dengan. Info ini juga dapat ditemukan di bagian bawah situs web Lory tetapi lebih mudah dibaca di GitHub.

Pembaruan tidak sering tetapi Anda selalu bisa tulis permintaan masalah pada GitHub jika Anda mengalami masalah. Jika Anda benar-benar memiliki masalah dengan kode, Anda mungkin akan memiliki waktu yang lebih mudah untuk menyelesaikannya di Stack Overflow.

Bagaimanapun, Anda bisa memulai dengan cepat menggunakan Cloudflare CDN dan GitHub docs. Dan jika Anda sedang mencari demo langsung dengan kode lihat entri CodePen ini.