Lory Carousel Slider Caratteristiche Animazione CSS e supporto touch

Di tutto il plug-in carosello online Devo dare la mancia al mio cappello Lory. È così concetto semplice ma è facilmente uno di i cursori più potenti In rete.

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

È possibile aggiungere questo plug-in a qualsiasi sito Web da esso gira su jQuery o plain vanilla JS. Può essere eseguito con nessuna dipendenza che è ottimo per la compatibilità.

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

Dovrai fai tutta la codifica programmatica da solo se vuoi 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.

Dai un'occhiata alla pagina iniziale di Lory per codice sorgente e dettagli sulla configurazione.

Inizia aggiungendo la libreria Lory JS al tuo sito capo sezione, sia come plugin jQuery o libreria vanilla. Tutte le versioni sono al momento ospitato sul CDN di Cloudflare, quindi è super 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 viene fornito con alcune classi predefinite quindi va bene bastone con il loro modello.

Ecco alcuni codice di esempio preso dal repository principale di Lory GitHub:

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

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

Notare la infinito l'opzione è solo una delle molte funzionalità che puoi personalizzare. E puoi sempre cambiare il .js_slider classe per soddisfare le tue esigenze.

Durante lo sviluppo con questo plugin è probabile che tu abbia tonnellate di domande di personalizzazione. Lo consiglio vivamente sfogliando la documentazione che si trova nella parte inferiore della 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 puoi armeggiare con. 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 Penna una richiesta di rilascio su GitHub se incontri dei problemi. Se hai davvero problemi con il codice, probabilmente avrai più tempo per risolverli su Stack Overflow.

In ogni caso, puoi iniziare abbastanza velocemente utilizzando la CDN Cloudflare e i documenti GitHub. E se stai cercando un live demo con codice controlla questa voce CodePen.