Lory Carousel Slider Caracteristici CSS Animație și Touch Support

Dintre toate carusel plugins online Trebuie să-mi înfrâng pălăria Lory. E așa concept simplu dar este ușor unul cele mai puternice glisante pe internet.

minified version totalizează aproximativ 7KB, ceea ce nu este mic, dar sigur nu este rău pentru un slider cu carusel cu atingere.

Puteți adăuga acest plugin pe orice site web din moment ce acesta rulează pe jQuery sau JS vanilie simplu. Se poate rula cu fără dependențe care este excelent pentru compatibilitate.

Lory este, de asemenea, unul dintre puținele pluginuri care nu se degradează în browserele mai vechi. este sprijinit pe deplin în IE10+, și versiunile mai vechi pot rula în continuare cursorul, doar fără animații și puțin extra.

Va trebui faceți-vă singuri codificarea programată dacă doriți să adăugați conținut, dar este surprinzător de simplu. Puteți defini cât de mare va fi fiecare panou, cât timp să animați și cum să faceți față browserelor receptive.

Check out pagina de pornire Lory pentru cod sursa și detalii despre configurare.

Începeți prin adăugarea bibliotecii Lory JS la site-ul dvs. cap secțiune, fie ca un plugin jQuery, fie ca o bibliotecă de vanilie. Toate versiunile sunt în prezent găzduit pe Cloudflare CDN, astfel încât este foarte ușor să includeți o copie fără descărcări.

Cu fișierul JavaScript instalat, veți dori să creați o listă HTML neordonată cu conținutul diapozitivului, dar Lory vine cu câteva clase predefinite așa că e bine să stick cu modelul lor.

Iată câteva cod simplu luată din principalul replică Lory GitHub:

Acum, în jQuery (sau JS simplu), poți configurați un apel pentru funcții. Ar trebui să arate ceva de genul:

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

Rețineți infinit opțiunea este doar una dintre caracteristicile pe care le puteți personaliza. Și puteți schimba întotdeauna .js_slider clasa pentru a se potrivi nevoilor dvs..

În timp ce dezvolți cu acest plugin, ai de gând să ai multe întrebări de personalizare. Aș recomanda foarte mult navigând în documentație care se află chiar în partea de jos a paginii GitHub.

Probabil nu cea mai bună locație pentru docs, dar din fericire sunt destul de mici. Numai tu ai aproximativ 10 opțiuni pentru a personaliza și poate 10-12 evenimente diferite cu care te poți juca. Această informație poate fi găsită și în partea de jos a site-ului Lory, dar este mult mai ușor de citit pe GitHub.

Actualizările nu sunt la fel de frecvente, dar puteți oricând pentru o cerere de eliberare pe GitHub dacă întâmpinați probleme. Dacă într-adevăr aveți probleme cu codul, probabil că veți avea nevoie de o soluționare mai ușoară a acestora pentru stack overflow.

Oricum, poți începeți destul de repede utilizând CD-urile Cloudflare și documentele GitHub. Și dacă căutați un a live demo cu cod verificați această intrare CodePen.