Lory Carousel Slider Ciri-ciri CSS Animasi & Sokongan Sentuh

Daripada semua plug-in carousel online Saya perlu mengetuk topi saya Lory. Ia seperti itu konsep mudah tetapi ia mudah salah satu slider yang paling berkuasa di web.

The versi minified jumlahnya kira-kira 7KB yang tidak kecil tetapi pasti tidak baik untuk gelangsar karusel yang membolehkan sentuhan.

Anda boleh menambah plugin ini ke laman web mana pun semenjak itu berjalan di jQuery atau vanila biasa JS. Ia boleh berjalan dengan tiada kebergantungan yang bagus untuk keserasian.

Lory juga salah satu daripada beberapa plugin itu tidak merosakkan di pelayar lama. Ia disokong sepenuhnya dalam IE10+, dan versi yang lebih lama masih boleh berjalan slider, hanya tanpa animasi dan tambahan kecil.

Anda perlu lakukan semua pengaturcaraan programatik diri anda jika anda ingin menambah kandungan tetapi ia menghairankan mudah. Anda boleh menentukan berapa besar untuk membuat setiap panel, berapa lama untuk bernyawa, dan bagaimana untuk menangani pelayar yang responsif.

Lihat laman utama Lory untuk kod sumber dan butiran mengenai persediaan.

Mula dengan menambah perpustakaan Lory JS ke laman web anda kepala seksyen, sama ada sebagai plugin jQuery atau perpustakaan vanila. Semua versi pada masa ini dihoskan pada CDN Cloudflare, jadi sangat mudah untuk menyertakan salinan tanpa sebarang muat turun.

Dengan fail JavaScript yang dipasang, anda perlu membuat senarai HTML yang tidak disusun dengan kandungan slaid, tetapi Lory datang dengan beberapa kelas yang telah ditetapkan jadi ia baik berpegang dengan model mereka.

Berikut adalah beberapa kod sampel diambil dari repo utama Lory GitHub:

Sekarang dalam jQuery (atau plain JS), anda boleh menyediakan panggilan fungsi. Ia sepatutnya kelihatan seperti ini:

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

Perhatikan tak terhingga pilihan adalah salah satu daripada banyak ciri yang boleh anda sesuaikan. Dan anda sentiasa boleh menukarnya .js_slider kelas untuk memenuhi keperluan anda.

Semasa membangunkan dengan plugin ini, anda bertanggungjawab untuk mempunyai banyak soalan penyesuaian. Saya sangat mengesyorkan melayari dokumentasi yang berada di bahagian paling bawah halaman GitHub.

Mungkin bukan lokasi yang terbaik untuk dokumen tetapi bersyukur mereka agak kecil. Anda hanya ada kira-kira 10 pilihan untuk menyesuaikan dan mungkin 10-12 acara berbeza anda boleh tinker dengan. Maklumat ini juga boleh didapati di bahagian bawah laman web Lory tetapi lebih mudah dibaca di GitHub.

Kemas kini tidak kerap tetapi anda sentiasa boleh menerbitkan permintaan isu pada GitHub jika anda menghadapi masalah. Jika anda benar-benar mempunyai masalah dengan kod itu, anda mungkin akan mempunyai masa yang mudah menyelesaikannya di Stack Overflow.

Sama ada, anda boleh mulakan dengan cepat menggunakan CDN Cloudflare dan dokumentasi GitHub. Dan jika anda sedang mencari demo hidup dengan kod semak kemasukan CodePen ini.