Lory Carousel Slider Caratteristiche Animazione CSS e supporto touch

Tra tutti i plugin di carosello online devo dare la mancia a Lory . È un concetto così semplice ma è facilmente uno dei più potenti slider sul web.

La versione minificata ammonta a circa 7KB che non è piccola ma certamente non è male per un cursore a carosello abilitato al tocco .

È possibile aggiungere questo plug-in a qualsiasi sito Web poiché viene eseguito su jQuery o plain vanilla JS . Può funzionare senza dipendenze che è grande per la compatibilità.

Lory è anche uno dei pochi plug-in che non si degradano nei browser più vecchi . È completamente supportato in IE10 +, e le versioni precedenti possono ancora eseguire il cursore, solo senza animazioni e piccoli extra .

Dovrai eseguire autonomamente la codifica programmatica se desideri aggiungere contenuti, ma è sorprendentemente semplice . È possibile definire la dimensione di ciascun pannello, la durata dell'animazione e il modo in cui gestire i browser reattivi.

Controlla la homepage di Lory per il codice sorgente e i dettagli sulla configurazione .

Inizia aggiungendo la libreria Lory JS alla sezione head del tuo sito, sia come plugin jQuery che come libreria vanilla. Tutte le versioni sono attualmente ospitate sul CDN di Cloudflare, quindi è molto facile includere una copia senza download.

Con il file JavaScript installato, ti consigliamo di creare un elenco non ordinato HTML con i contenuti della diapositiva, ma Lory ha alcune classi predefinite, quindi è meglio attenersi al modello .

Ecco alcuni esempi di codice presi dal repository principale di Lory GitHub:

1
2
3
4
5
6

Ora in jQuery (o semplicemente JS), è possibile impostare una chiamata di funzione . Dovrebbe assomigliare a qualcosa di simile a questo:

 $ ('. js_slider'). lory ({infinito: 1}); 

Nota l'opzione infinite è solo una delle molte funzionalità che puoi personalizzare. E puoi sempre modificare la classe .js_slider in base alle tue esigenze.

Durante lo sviluppo con questo plugin è probabile che tu abbia tonnellate di domande di personalizzazione. Consiglio vivamente di consultare la documentazione che si trova in fondo alla pagina GitHub.

Probabilmente non è il posto migliore per i documenti, ma per fortuna sono piuttosto piccoli. Hai solo circa 10 opzioni per personalizzare e forse 10-12 diversi eventi con cui puoi armeggiare. Questa informazione può anche essere trovata nella parte inferiore del sito di Lory ma è molto più facile da leggere su GitHub.

Gli aggiornamenti non sono frequenti ma puoi sempre eseguire una richiesta di rilascio su GitHub in caso di problemi. Se hai davvero problemi con il codice, probabilmente avrai più tempo per risolverli su Stack Overflow.

In ogni caso, è possibile iniziare abbastanza rapidamente utilizzando la CDN Cloudflare e i documenti GitHub. E se stai cercando una demo live con codice, controlla questa voce CodePen.