Crea un componente di carosello flessibile

VUE.JS è arrivato a balzi e limiti di recente, diventando il sesto progetto più biforcato finora Github. Al momento della scrittura, anche davanti ai reactjs di Facebook. È sicuro dire che sta rapidamente diventando un mainstay in sviluppo web , e un go-to affidabile Quadro JavaScript. per l'uso in progetti.

In questo tutorial, utilizzeremo VUE.JS per creare un semplice componente carosello. Questo componente accetterà un numero di proprietà diverse, consentendo di modificare alcune impostazioni di base come la velocità di transizione, il tipo di transizione e se il carosello dovrebbe trasferire automaticamente le diapositive.

Se tutto questo sembra troppo complicato, a Builder del sito web lo strumento potrebbe essere più la tua cosa. Felice di creare un sito più complesso? Hai bisogno web hosting che può far fronte.

• Accelerare le prestazioni con VUE.JS

Per iniziare, Scarica i file del progetto qui (e salvali dentro deposito cloud. ) E apri la directory 'Sito web-Template' nell'editor del testo preferito. Nel frattempo nel terminale, CD in "Template del sito Web" e quindi eseguire "NPM Installa" per installare le dipendenze dei progetti node.js. Infine, esegui 'npm run dev' per avviare un server di sviluppo in modo da poter visualizzare il progetto nel browser. Tipicamente questo sarebbe a 'localhost: 8080'.

01. Crea file di scorrimento carosello

In "SRC / Components", creare una nuova directory chiamata "app-carosol-slide" e in esso due file: 'app-carousel-slide.vue' e 'componente.app-carosel-slide.scs'. Questi conterranno i primi due nuovi componenti VUE.JS che creeremo, che quando usato insieme creerà il nostro componente carosello.

02. Aggiungi carosello Slide SCSS

Dal pacchetto Filesolo, copiare il contenuto di '/support-files/step-02-slide.scs' in 'componente.app-carosol-slide.csss'. Questo è lo SCSS per il componente di diapositiva e utilizza la proprietà 'Flex-Grow' per assicurarsi che ogni diapositiva si espanda per riempire il suo elemento genitore.

03. Creare il componente di diapositiva

Nel file "app-carousel-slide.vue", aggiungi lo snippet qui sotto per creare la struttura del componente VUE.JS. Lo useremo come fondamento per costruire la diapositiva del carosello.

 & lt; Template & GT; & Lt; / Template & GT;
& lt; script & gt;
Esporta predefinito {
  Nome: 'app-carosol-slide'
}
& lt; / script & gt; 

04. Aggiungi uno slot modello per le immagini di scorrimento carosello

Nel vuoto & lt; modello e gt; Elemento della diapositiva del carosello, aggiungeremo un elemento 'div' per rappresentare la diapositiva, insieme a uno speciale elemento slot che chiameremo 'immagine'. In VUE.JS, gli slot ti consentono di intrecciare i propri contenuti con il modello del componente senza modificarlo. In questo caso, vengono utilizzati in modo da poter passare in seguito l'immagine per lo sfondo della diapositiva, quindi il risultato finale, quando alla fine usato, sembrerebbe '' & lt; app-carousel-slide & gt; & lt; img src = '' alt = ' '& GT; & Lt; / app-carosol-slide & gt;'.

 & lt; div class = "c-app-carosol-slide" & gt;
  & lt; slot name = "immagine" & gt; & lt; / slot & gt;
& lt; / div & gt; 

05. Aggiungi il contenitore del testo della diapositiva

Tutto ciò che rimane per il componente di diapositiva è quello di costruire il contenitore del testo. Usereremo di nuovo slot, uno per il titolo di diapositiva più grande e uno per il testo normale. Usereremo anche una direttiva VUE.JS chiamata "V-IF" per aggiungere logica, che rende solo il contenitore del testo se almeno uno degli slot viene superato il contenuto. Aggiungi questo snippet in 'c-app-carosol-slide', poco prima dello slot 'immagine'.

 & lt; div class = "c-app-carosel-slide__text-block"
v-if = "questo. $ slot ['titolo'] || questo. $ slot ['testo']" & gt;
  & lt; h1 class = "c-app-carosol-slide__title"
  V-IF = "questo. $ slot ['titolo']" & gt;
  & lt; slot name = "title" & gt; & lt; / slot & gt;
  & lt; / h1 & gt;
  & lt; div class = "c-app-carosol-slide__text"
  V-IF = "questo. $ slot ['testo']" & gt;
  & lt; slot name = "testo" e gt; & lt; / slot & gt;
  & lt; / div & gt;
& lt; / div & gt;

06. Crea file di carosello

Torna in "SRC / Components", crea una nuova directory chiamata 'app-carosol' e quindi al suo interno due nuovi file: 'app-carousel.vue' e 'componente.app-carousel.css'. Questi terranno il secondo dei due componenti VUE.JS: il carosello principale stesso.

07. Aggiungi carosello css

Copia il contenuto di '/support-files/step-07-slide.scs' nel vuoto 'componente.app-carousel.scss'. Questo è la SCS per il principale componente carosello.

08. Crea componente carosello

Avanti in 'app-carousel.vue', costruiremo la struttura del componente del carosello. Stiamo importando il componente 'Appicon' e la "Arrow" SVG per un uso successivo nelle icone successive e precedenti del carosello. Questi lavori insieme alla dipendenza "Svg-Spriteer-Loader" per generare un sistema di icone SVG di base, che funziona utilizzando SGG 'Symbols' e il suo elemento 'Usa'.

 & lt; Template & GT; & Lt; / Template & GT;
& lt; script & gt;
Importa Appicon da.
'@ / componenti / app-icon / app-icon'
importare la freccia da.
'./../../assets/img/arrow.svg'
Esporta predefinito {
  Nome: 'app-carosol',
  Componenti: {
  Appicon.
  },
  dati () {
  ritorno {
  freccia
  }
  }
}
& lt; / script & gt; 

09. Costruisci il modello del carosello

Iniziamo ad aggiungere contenuti all'elemento del modello vuoto. L'area principale di interesse Ecco l'elemento 'C-APP-CAREUSEL__Container', che calcolare brevemente una larghezza per in base al numero di scivoli trovati al suo interno. Sposteremo quindi il contenitore usando la trasformazione CSS: traduci e transizioni per simulare il movimento della diapositiva.

 & lt; div class = "c-app-carosol" & gt;
  & lt; div class = "c-app-carosol__wrapper" & gt;
  & lt; div class = "c-app-carousel__container" & gt;
  & lt; slot & gt; & lt; / slot & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / div & gt; 

10. Aggiungi i controlli e le frecce del carosello

Abbiamo quindi bisogno di aggiungere l'HTML per il contenitore dei comandi del carosello e le frecce precedenti e successive; Quest'ultimo utilizzando il sistema di icone e SVG importati al punto 8. Aggiungi questi dopo l'elemento 'C-APP-CAREUSEL__WAPPER'.

 & lt; app-icon class = "c-app-icon-arrow-ded c-app-carousel__arrow" use = "freccia" / & gt;
& lt; div class = "c-app-carosol__controls" & gt;
& lt; / div & gt;
& lt; app-icon class = "c-app-icon-arrow-next c-app-carousel__arrow" use = "arrow" / & gt; 

11. Creare il negozio di dati carosello e aggiungere proprietà

Avremmo aggiungendo tre nuove proprietà all'archivio dati del componente: 'Slidetotal' terrà il numero totale di diapositive; 'Activeslideindex' registrerà l'indice della diapositiva visibile in modo che possa essere utilizzato per calcolare la posizione del contenitore; Mentre Autointerval registerà il timer dell'intervallo che attiverà una transizione di diapositiva automatica. Tutti questi sono impostati su NULL, ad eccezione di "Activeslideindex", dove il valore "0" indica che la prima diapositiva deve essere la diapositiva predefinita.

 Dati () {
  ritorno {
  freccia,
  Slidetotal: Null,
  Activeslideindex: 0,
  Autointerval: NULL.
  }
} 

12. Calcola Slidetotal.

Aggiungi 'Ref = "Container"' all'elemento 'C-APP-CAROUSEL__Container' nel modello e quindi aggiungere lo snippet sottostante come proprietà dell'oggetto componente stesso. 'Ref' è usato per dare un facile accesso a un elemento, che in questo caso è il contenitore in modo che possiamo contare quanti elementi figlio (aka diapositive) ha. La presenza di questa logica in una funzione "montata ()" significa che viene eseguita automaticamente quando il componente viene per primo reso.

 montato () {
  questo.slidetotale =
  Questo. $ refs.container.children.length;
}

13. Calcola la larghezza del contenitore

Nel componente, creare una nuova proprietà dell'oggetto chiamata "calcolata" e al suo interno, una nuova funzione chiamata 'containerwidth ()'. Lo useremo per calcolare la larghezza del contenitore del carosello in base alla figura "slidetotale".

 Computato: {
   containerwidth () {
      return this.slidetotal * 100 + '%';
   }
} 

14. Crea metodi

Quindi, crea un altro oggetto oggetto chiamato "Metodi" per memorizzare le funzioni del nostro carosello. 'GOTOSLIDE ()' è un modo semplice per impostare 'Activeslideindex' dal punto 11, 'ISCONTROLACTIVE ()' Restituisce True quando l'indice di un controllo corrisponde a 'Activeslideindex', mentre 'NEXTSLIDE ()' E 'PRESTLIDE ()' SI ATTRAVERSO le diapositive.

 Metodi: {
  gotoslide (slideindex) {
  questo.activeslideindex = slideindex;
  },
  isontrolactive (controlindex) {
  return controlindex - 1
  === questo.activeslideindex;
  },
  nextslide () {
  questo.activeslideindex === questo.
  Slidetotal - 1? Questo.activeslideindex.
  = 0: questo.activeslideindex ++;
  },
  prevedere () {
  questo.activeslideindex === 0? Questo.
  activeslideindex = this.slidetotale - 1
  : questo.activeslideindex--;
  }
} 

15. Calcola la posizione del contenitore del carosello

Il carosello utilizza un valore percentuale con trasformazione: Translatex e animazione CSS per simulare la transizione della diapositiva. Aggiungi lo sotto snippet all'oggetto "calcolato" in modo che possiamo calcolare questo valore.

 ActiveSlidePosition () {
  Ritorno '-' + (100 / This.Slidetotale)
  * questo.activeslideindex + '%';
} 

16. Componi CSS in linea

Ora abbiamo tutti i valori per posizionare correttamente il contenitore di slide carosello, dobbiamo costruire il CSS che aggiungeremo quindi al suo attributo "stile". Aggiungeremo questa logica come un'altra funzione nell'oggetto "calcolato".

 Containterstyle () {
  restituire 'larghezza: $ {questo.Containerwidth};
  Trasforma: Translatex ($ {questo
  .ACTIVESLIDEPOSIZIONE}); `

17. Bind Inline CSS

Aggiungere lo sotto snippet all'elemento "C-app-carousel__container" nel modello. Ciò legelle il valore restituito di 'Containterstyle () () dal passaggio precedente all'attributo "Stile" del contenitore del carosello, il che significa che il suo CSS e quindi la sua posizione verrà automaticamente aggiornata quando le cose cambiano.

 V-Bind: Style = "Containterstyle" 

18. Ganciare le frecce successive / precedenti

Ora abbiamo bisogno di aggiungere logica alle frecce successive / precedenti in modo che il metodo corretto dal passaggio 14 sia chiamato quando si fa clic su ciascuna rispettiva freccia. Lo snippet 'prevalente ()' appartiene all'elemento 'C-APP-ICON-Arrow-Prev', mentre 'NEXTSLIDE ()' appartiene all'elemento "C-App-Icon-Arrow-Axed". La direttiva "V-on" è un modo semplice per configurare gli ascoltatori di eventi in VUE.JS, con "click" essendo l'evento DOM che stiamo prendendo di mira.

 // prev
V-on: click.native = "prevelide ()"
// Il prossimo
V-on: Click.native = "Nextslide ()" 

19. Genera controlli caroselli

Geniamo gli elementi di controllo e farli mostrare la diapositiva corrispondente quando si fa clic. Aggiungi il sotto dell'elemento in 'c-app-carousel__controls'. La direttiva "V-for" viene utilizzata per creare una quantità di elementi di controllo che corrisponde alla variabile 'slidetotale', mentre la direttiva "V-Bind" consente alla classe "IS-ACTIVE" solo quando il metodo "ISCONTROActive" dal punto 14 ritorna vero. Infine, stiamo creando un altro ascoltatore di eventi attraverso "V-on", quindi, quando si fa clic, il controllo chiama il metodo "GOTOSLIDE" e passa il suo indice, che dovrebbe corrispondere all'indice della diapositiva corrispondente.

 & lt; div v-for = "n in slidetotal"
: Key = "n" V-Bind: class =
"{'is-active': isontrolactive (n)}"
class = "c-app-carousel__control"
V-on: click = "gotoslide (n - 1)" & gt; & lt; / div & gt; 

20. Componenti di importazione

Ora torniamo al componente "App.Vue" di alto livello e importa tutto. Subito dopo l'apertura e lt; script & gt; Tag, importare il componente '.vue'. File:

 Importa AppCarOUSEL da '@ / componenti / app-carosel / app-carosel'
Importa AppCarouselslide da '@ / componenti / app-carosel-slide / app-carosel-slide' 

Successivamente, modificare l'oggetto 'Componenti', quindi fa riferimento a questi componenti di nuova importazione.

 Componenti: {
   AppButton,
   AppCaroUSEL,
   appcarouselslide.
} 

Infine, nel & lt; stile & gt; Tag, importare i nostri nuovi SCS con il resto delle importazioni dei componenti.

 @import "/ componenti / app-carosel /
componente.app-carosel ";
@import "/ componenti / app-carosel-slide /
componente.app-carosel-slide "; 

21. Aggiungi carosello e diapositive

Infine, aggiungiamo il nostro nuovo componente di carosello e alcune diapositive all'app principale. Ancora in 'App.Vue', sostituisci la "Costruzione in corso" con lo snippet qui sotto. Ogni & lt; app-carosol-slide & gt; L'elemento rappresenta una singola diapositiva. Aggiungi tutti i tuoi desideri, sostituendo il testo o l'immagine dove desiderato. Incluso sono "test-photo-01.jpg" a 'Test-Photo-05.jpg'. Una volta che è finita la compilazione, tutto dovrebbe ora funzionare. Huzzah!

& lt; app-carosel & gt;
  & lt; app-carosol-slide & gt;
  & lt; modello slot = "Titolo" e GT; My Slide
  & lt; / Template & GT;
  & lt; slot modello = "testo" e GT;
  & lt; P & GT; questa è una diapositiva carosello. & lt; / P & GT;
  & lt; app-button & gt; andiamo a go & lt; / app-button & gt;
  & lt; / Template & GT;
  & lt; img slot = "immagine"
  src = "./ Assets / IMG / Test-Photo-01.jpg"
  ALT = "My Carosel Photo" & GT;
  & lt; / app-carosol-slide & gt;
& lt; / app-carosel & gt; 

22. Aggiungi flessibilità alla carosello

Ora abbiamo un carosello di VUE.JS funzionante, aggiungiamo alcune funzionalità aggiuntive in modo che possiamo facilmente personalizzare la durata della transizione di diapositiva, la sua proprietà di temporizzazione, dichiarando se le diapositive devono far scorrere automaticamente, e in tal caso quanto spesso. Riaprire 'app-carousel.vue' e aggiungere le proprietà nello snippet sottostante all'oggetto componente.

 Puntelli: {
  durata della transizione: {
  Tipo: stringa,
  Predefinito: '0,5s'
  },
  TransitionTiming: {
  Tipo: stringa,
  Predefinito: "facilità"
  }
} 

23. Modificare i containterstyle ()

I valori passati a queste proprietà dovrebbero farsi strada per il CSS in linea del carosello dal retro al punto 17. Ora modifichiamo la funzione calcolata "Containterstyle" per assicurarsi che ciò accada.

 Containterstyle () {
  Return `Larghezza: $ {This.Containerwidth};
  trasformare:
  translatex ($ {questo this.activeslideposition});
  Transition-Timing-Function:
  $ {This.TransitionTiming};
  durata della transizione:
  $ {This.TransitionDurationDuration}; `
} 

24. Passare i dati alle proprietà del carosello

Lo Snippet sotto illustra il modo in cui passeremmo i dati a queste nuove proprietà al & lt; app-carosel & gt; elemento in 'app.vue'. Una volta aggiunto, dovresti essere in grado di passare qualsiasi valore che desideri. Ad esempio, una durata "3.0s" comporterebbe una transizione di scivolo molto lenta!

 & lt; app-carosel
Transition-Durata = "0,25s"
Transition-Timing = "Facile-in-out" e GT; 

25. Aggiunta di puntelli a scorrimento automatico

Per la diapositiva automatica, dobbiamo aggiungere due oggetti aggiuntivi a "puntelli" in 'app-carousel.vue'. 'Auto' è 'vero' o 'falso', che corrisponde a se il carosello dovrebbe continuare a sluire automaticamente. "Autotiming" controlla il tempo prima dei trigger di diapositive automatici, con il valore predefinito di 5000 millisecondi.

 Auto: {
  Tipo: stringa,
  Predefinito: "falso"
},
Autotiming: {
  Tipo: stringa,
  Predefinito: 5000.
} 

26. Avviare Auto-Slide

Ora dobbiamo iniziare la diapositiva automatica sul carico del componente. Nella funzione "montata ()" della carosello, dopo il contenuto esistente, verificare se la proprietà 'AUTO' è impostata su 'TRUE'. In tal caso, creare un intervallo che attiva ripetutamente il metodo "Nextslide ()" una volta che il valore "AutoTIming" è passato.

 IF (questo.Auto === 'vero') {
  questo.autointerval = setinterval (() = & gt; {
  questo.nextslide ();
  }, Parseint (questo.Autotiming));
} 

27. Annullare il metodo Auto-Slide

Ovviamente, abbiamo bisogno di un modo per l'utente di disabilitare la diapositiva automatica se hanno espresso il desiderio di azionare manualmente il carosello. Il primo passo verso questo è un nuovo metodo carosello chiamato "cancellautoslide". Ciò annullerà semplicemente l'intervallo creato nel passaggio precedente.

 cancellautoslide () {
   clearinterval (questo.autointerval);
} 

28. Trigger Cancellautoslide.

Se l'utente fa clic su una freccia o un elemento di controllo, è ragionevole presumere che desideri funzionare manualmente il carosello, quindi chiamiamo il metodo "cancellautoslide" se si fa clic su qualsiasi di questi elementi. Per fare ciò, aggiungere semplicemente '+ cancellautoslide ()' a ciascun elementi 'V-on' Direttiva. Vedere lo snippet qui sotto per un esempio usando la freccia scorrevole "precedente".

 V-on: Click.native = "Prexslide () + Annullautoslide ()" 

29. Passare i valori ai puntelli a scorrimento automatico

Infine, passiamo alcuni valori alle proprietà Auto-Slide che abbiamo creato. Indietro in 'App.VUE', aggiungere lo Snippet sotto il & lt; app-carosel & gt; Elemento per abilitare un diapositivo automatico ogni tre secondi.

 AUTO = "True" Auto-Timing = "3000"

30. Finisci la costruzione del componente del carosello

Annulla il server di sviluppo o aprire una nuova finestra del terminale e eseguire "NPM Run Build" per creare una versione compilata e pronta per la produzione del componente Carousel Powered VUE.JS nella directory 'Dist'.

Questo articolo è stato originariamente pubblicato in emissione 269 di Web Designer di Web Design Design. Comprare il problema 269 qui o Iscriviti al web designer qui .

Evento web design creare Londra Restituisce il 19-21 settembre 2018, offrendo un programma confezionato di altoparlanti leader del settore, una giornata intera di workshop e preziose opportunità di networking - da non perdere. Prendi il tuo creare Biglietto ora .

Articoli Correlati:

• 7 strumenti essenziali per il web designer di oggi
• Aggiungi un effetto glitch al tuo sito web
• 6 incredibili 'su' pagine per ispirarti