Share
In un post precedente ti ho mostrato come creare una galleria di immagini personalizzate con slick.js. Oggi parlerò del processo di creazione di uno slider animato, reattivo, a tutto schermo con giostra con owl.js (o "Owl Carousel").
Come al solito, per avere un'idea iniziale di ciò che costruiremo, dai un'occhiata alla relativa demo CodePen (controlla la versione più grande per una migliore esperienza):
Owl.js è un popolare plugin jQuery creato da David Deutch che ti consente di creare caroselli interessanti e reattivi. Per capire meglio cosa questo plugin può offrirti, dai un'occhiata alle demo.
Fortunatamente, ha un ottimo supporto per i browser, essendo stato testato sui seguenti dispositivi:
Per maggiori dettagli dare un'occhiata alla documentazione.
Per iniziare con gufo, inizia scaricando e installando i seguenti file nel tuo progetto:
Accentsconagua
owl.carousel.css o la sua versione minificataowl.carousel.js o la sua versione minificataOpzionalmente, potresti voler importare il owl.theme.default.css file.
Puoi prendere una copia dei file gufo corrispondenti visitando il repository Github, utilizzando un gestore di pacchetti (ad esempio npm) o caricando le risorse necessarie tramite un CDN (ad esempio cdnjs). Per questo tutorial, sceglierò l'ultima opzione.
Ai fini di questo tutorial, oltre ai file owl, ho anche incorporato Babel e Bootstrap 4.
Con questo in mente, se guardi sotto il impostazioni scheda della nostra penna dimostrativa, vedrai che ho incluso tre file CSS esterni e due file JavaScript esterni.
Per dare il calcio d'inizio definiamo un carosello che ha tre diapositive. Ciascuna di queste diapositive contiene un titolo, un sottotitolo e un pulsante di invito all'azione.
Ecco la struttura richiesta per la nostra pagina demo:
Vale la pena menzionare due cose a questo punto:
Con l'HTML in atto, diamo un'occhiata agli stili CSS che applicheremo alla nostra pagina. Per semplicità, discuteremo solo una parte degli stili disponibili.
Innanzitutto, definiamo due proprietà personalizzate e due classi helper:
: root --main-white-color: white; --main-black-color: nero; .static position: static; .cover background-size: cover; posizione di sfondo: centro; background-repeat: no-repeat;
Successivamente, specifichiamo gli stili per le diapositive del carosello, incluse le transizioni:
.owl-carousel .owl-slide position: relative; altezza: 100 vh; background-color: lightgray; .owl-carousel .owl-slide-animated transform: translateX (20px); opacità: 0; visibilità: nascosta; transizione: tutti gli 0.05; .owl-carousel .owl-slide-animated.is-transitioned transform: none; opacità: 1; visibilità: visibile; transizione: tutti gli 0,5; .owl-carousel .owl-slide-title.is-transitioned transition-delay: 0.2s; .owl-carousel .owl-slide-subtitle.is-transitioned transition-delay: 0.35s; .owl-carousel .owl-slide-cta.is-transitioned transition-delay: 0.5s;
Infine, impostiamo alcune regole per i metodi di navigazione:
.gufo-carousel .owl-dots, .owl-carousel .owl-nav position: absolute; .owl-carousel .owl-dots .owl-dot span background: transparent; border: 1px solid var (- main-black-color); transizione: tutti gli anni '20 si adattano; .owl-carousel .owl-dots .owl-dot: hover span, .owl-carousel .owl-dots .owl-dot.active span background: var (- main-black-color); .owl-carousel .owl-nav left: 50%; superiore: 10%; transform: translateX (-50%); margine: 0;
Nota: Le diapositive dovrebbero coprire l'intera altezza della finestra e quindi le diamo altezza: 100 vh. Tuttavia, poiché questa unità è incoerente su alcuni dispositivi (ad esempio dispositivi iOS), un'altra opzione è impostare l'altezza delle diapositive tramite JavaScript (vedere il pannello JavaScript della demo per maggiori informazioni).
A questo punto siamo pronti a rivolgere la nostra attenzione al JavaScript.
Come primo passo, inizializzeremo la giostra. Di default il plugin fornisce "punti di navigazione", ma il nostro carosello includerà anche le frecce di navigazione.
Opzioni di navigazione del gufoAbilitiamo l'opzione di navigazione attraverso il nav proprietà di configurazione. Inoltre, definiamo alcuni SVG personalizzati come frecce grazie a navText proprietà di configurazione.
Il codice che attiva il carosello è mostrato di seguito:
const $ owlCarousel = $ (". owl-carousel"). owlCarousel (items: 1, loop: true, nav: true, navText: ['','']);Come passo successivo, animiamo il contenuto di ogni diapositiva. Questo comportamento è gestito attraverso il cambiato evento che fornisce il gufo.
Ecco il codice associato:
$ owlCarousel.on ("changed.owl.carousel", e => $ (". owl-slide-animated"). removeClass ("is-transitioned"); const $ currentOwlItem = $ (". owl-item" ) .eq (e.item.index); $ currentOwlItem.find (". owl-slide-animated"). addClass ("is-transitioned");); Ogni volta che visitiamo una nuova diapositiva, in primo luogo spariscono i contenuti di tutte le diapositive. Quindi, il contenuto della diapositiva corrente appare con una bella animazione slide-in.
Nota: invece del cambiato evento avremmo potuto ugualmente usare il tradotto evento.
Finora, abbiamo visto come vengono generate le animazioni mentre scorriamo le diapositive. Ma vogliamo anche questo tipo di animazione quando la giostra si carica inizialmente. Per implementare questa funzionalità, useremo il inizializzato evento.
Ecco il codice relativo a questo evento:
/ * devi associare l'evento inizializzato prima dell'inizializzazione di gufo (vedi demo) * / $ (". owl-carousel"). on ("initialized.owl.carousel", () => setTimeout (() => $ (".owl-item.active .owl-slide-animated"). addClass ("is-transitioned");, 200););All'interno di quell'evento aggiungiamo il è-transizione classe agli elementi della prima diapositiva.
È importante notare che questo evento deve essere allegato prima dell'inizializzazione del carousel.
Prima di andare avanti, copriamo una cosa difficile. Se guardi la pagina demo, vedrai che c'è un sezione elemento definito sotto il carosello. Per impostazione predefinita, fino a quando il caricatore non si carica, viene visualizzato il contenuto della sezione e nella pagina viene visualizzato un piccolo salto.
Esistono due modi per risolvere questo comportamento indesiderato. Innanzitutto, possiamo aggiungere un preloader (lo abbiamo già fatto nel tutorial relativo a slick). Una seconda opzione che implementeremo qui è quella di nascondere il sezione e mostralo non appena viene inizializzata la giostra.
In termini di codice, la regola CSS necessaria è questa:
sezione display: nessuno;
E il codice JavaScript:
$ (". owl-carousel"). on ("initialized.owl.carousel", () => setTimeout (() => // altro codice qui $ ("section"). show ();, 200););L'ultima cosa che dobbiamo fare è posizionare la navigazione dei punti. Di default, è assolutamente posizionato. Le seguenti cose dovrebbero accadere:
.gufo-slide-text elemento della diapositiva di destinazione. La funzione che esegue e imposta la posizione desiderata per i nostri punti è la setOwlDotsPosition.
Ecco quella funzione:
function setOwlDotsPosition () const $ target = $ (". owl-item.active .owl-slide-text"); doDotsCalculations ($ target); Questo isola il .gufo-slide-text elemento della diapositiva attiva e lo passa come argomento al doDotsCalculations sottofunzione.
Ecco la sotto-funzione:
function doDotsCalculations (el) const height = el.height (); const top, left = el.position (); const res = height + top + 20; $ (". owl-carousel .owl-dots"). css (top: '$ res px', a sinistra: '$ left px'); All'interno di questa funzione impostiamo l'appropriato superiore e sinistra valori del .OWL-punti elemento basato sull'altezza e sulla posizione dell'elemento obiettivo.
Andando oltre, la posizione dei punti dovrebbe essere aggiornata mentre ridimensioniamo la finestra del browser. Per ottenere ciò, sfruttiamo il ridimensionare evento gufo.
Ecco il codice necessario:
$ owlCarousel.on ("resize.owl.carousel", () => setTimeout (() => setOwlDotsPosition ();, 50););Ultimo ma non meno importante, mentre navighiamo attraverso le diapositive, i punti devono essere riposizionati in base all'altezza e alla posizione dei contenuti della diapositiva attiva. Grazie al cambiato evento di nuovo, siamo in grado di risolvere questo nuovo requisito.
Ecco il codice relativo:
$ owlCarousel.on ("changed.owl.carousel", e => // altro codice qui const $ currentOwlItem = $ (". owl-item"). eq (e.item.index); const $ target = $ currentOwlItem.find (". owl-slide-text"); doDotsCalculations ($ target););Prima di concludere, discutiamo di un bug di gufo comune. Se rimuoviamo la sezione che si trova sotto il carosello, la barra di scorrimento verticale scompare eappare una parte della diapositiva adiacente.
Per risolvere questo problema, attiviamo il ricaricare evento dopo l'inizializzazione del carosello, come questo: $ OwlCarousel.trigger ( "refresh.owl.carousel");
La demo dovrebbe funzionare bene in tutti i browser recenti e puoi tranquillamente usarla nei tuoi progetti. Ecco un promemoria di ciò che abbiamo costruito:
In questo esauriente tutorial, siamo riusciti a creare un cursore animato a tutto schermo con giostra con owl.js. Speriamo che avrai acquisito alcune nuove competenze che sarai in grado di mettere in pratica nei tuoi prossimi progetti. Come sempre, se avete domande, fatemelo sapere nei commenti qui sotto.
