Lory Carousel Slider Značajke CSS Animacija i podrška za dodir

Od svih vrtuljka dodataka online Moram napuniti šešir lori. Takva je jednostavan koncept ali to je lako najmoćniji klizači na internetu.

minificirana verzija iznosi oko 7KB što nije malo, ali svakako nije loš za karusel klizač s mogućnošću dodira.

Taj dodatak možete dodati bilo kojoj web-lokaciji od tada radi na jQuery ili običnoj vanili JS. Može raditi nema ovisnosti što je izvrsno za kompatibilnost.

Lory je također jedan od rijetkih dodataka u starijim preglednicima ne degradira. to je u potpunosti podržan u IE10+, i starije verzije mogu i dalje pokretati klizač, samo bez animacija i malih dodataka.

Morat ćete učinite sve programsko kodiranje sami ako želite dodati sadržaj, ali to je iznenađujuće jednostavno. Možete odrediti veličinu svakog panela, koliko dugo će se animirati i kako se nositi s odgovornim preglednicima.

Pogledajte početnu stranicu Lory za izvorni kod i pojedinosti o postavljanju.

Počnite dodavanjem knjižnice Lory JS na web-lokaciju glava odjeljak, ili kao jQuery dodatak ili kao vanilija. Trenutno su sve verzije domaćin na Cloudflare CDN, tako da je vrlo jednostavno uključiti kopiju bez preuzimanja.

S instaliranom JavaScript datotekom želite stvoriti HTML neuređeni popis sa sadržajem slajda, ali Lory dolazi s nekoliko unaprijed definiranih klasa tako da je dobro držati se njihovog modela.

Evo nekih uzorak koda preuzeto iz glavnog Lory GitHub repo:

 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
 
 

Sada u jQuery (ili običnom JS), možete postavite poziv funkcije. Trebalo bi izgledati ovako:

 $ ('. js_slider'). lory (beskonačno: 1); 

Zabilježite beskonačan opcija je samo jedna od mnogih značajki koje možete prilagoditi. I uvijek možete promijeniti .js_slider klasi koja odgovara vašim potrebama.

Dok se razvijate s ovim dodatkom, vjerojatno ćete imati mnogo pitanja za prilagodbu. Vrlo bih preporučio pregledavanje dokumentacije koji se nalazi na samom dnu stranice GitHub.

Vjerojatno nije najbolje mjesto za dokumente, ali na sreću oni su prilično mali. Vi samo imate oko 10 opcija prilagoditi i možda 10-12 različitih događaja s kojim se možeš baviti. Ove se informacije mogu naći i na dnu Lory web stranice, ali je mnogo lakše čitati na GitHubu.

Ažuriranja nisu tako česta, ali uvijek možete napišite zahtjev za izdavanje na GitHubu ako naiđete na probleme. Ako zaista imate problema s kodom, vjerojatno ćete im lakše riješiti problem na Prelaku stogova.

U svakom slučaju, možete započnite vrlo brzo koristeći Cloudflare CDN i GitHub dokumente. A ako tražite live demo s kodom pogledajte ovaj unos CodePen-a.