Creați o componentă de carusel flexibil

Vue.js a venit recent la salturi și limite, devenind cel de-al șaselea dintre cele mai forțate proiecte de până acum Github. La momentul scrisului, chiar înainte de reacțiile proprii ale Facebook. Este sigur să spunem că devine rapid un suport în dezvoltare web , și o înțelegere fiabilă Cadrul JavaScript pentru utilizare în proiecte.

În acest tutorial, vom folosi vue.js pentru a crea o componentă de carusel simplu. Această componentă va accepta un număr de proprietăți diferite, permițându-vă să modificați unele setări de bază, cum ar fi viteza de tranziție, tipul de tranziție și dacă caruselul ar trebui să treacă automat diapozitivele.

Dacă toate acestea sună prea complicat, a Builder de site-uri web Instrumentul ar putea fi mai mult lucru. Fericit să creeze un site mai complex? Ai nevoie web hosting care pot face față.

• Accelerați performanța cu vue.js

Pentru a incepe, Descărcați fișierele de proiect aici (și salvați-i în Stocare in cloud ) și deschideți directorul "Șablon-șablon" din editorul de text preferat. Între timp, în terminal, CD-ul în "Șablon de site-uri web" și apoi rulați "NPM Install" pentru a instala proiectele NODE.JS dependențe. În cele din urmă, rulați "NPM Run Dev" pentru a porni un server de dezvoltare, astfel încât să puteți vizualiza proiectul dvs. în browser. De obicei, acest lucru ar fi la "localhost: 8080".

01. Creați fișiere de diapozitive de carusel

În "SRC / Componente", creați un nou director numit "App-Carusel-Slide" și în el două fișiere: "App-carousel-Slide.vue" și "component.app-carusel-slide.scss". Acestea vor conține primele două componente noi Vue.js pe care le vom crea, care, atunci când sunt utilizate împreună vor crea componenta noastră de carusel.

02. Adăugați SCRS diapozitiv de carusel

Din pachetul Filesilo, copiați conținutul lui "/support-files/step-02-slide.scs 'în" component.app-carusel-slide.scss ". Aceasta este SCSS pentru componenta de diapozitive și utilizează proprietatea "Flex-Grow" pentru a vă asigura că fiecare diapozitiv se extinde pentru a umple elementul părinte.

03. Creați componenta de diapozitive

În fișierul gol "App-Carousel-Slide.vue", adăugați fragmentul de mai jos pentru a crea structura componentei Vue.js. Vom folosi acest lucru ca bază pentru a construi diapozitivul de carusel.

 & lt; șablon & lt; / șablon & gt;
& lt; script & gt;
Export implicit {
  Nume: "App-carusel-diapozitiv"
}
& lt; / script & gt; 

04. Adăugați un slot de șablon pentru imaginile cu diapozitive de carusel

În șabloanele goale și gt; Elementul diapozitivului de carusel, vom adăuga un element "div" pentru a reprezenta diapozitivul, împreună cu un element special de slot pe care îl vom numi "imagine". În vue.js, sloturile vă permit să vă interconectați propriul conținut cu șablonul componentei fără ao edita. În acest caz, acestea sunt folosite astfel încât să putem transmite mai târziu imaginea pentru fundalul diapozitivului, astfel încât rezultatul final, când este folosit în cele din urmă, ar arăta ca "App-carousel-diapozitiv & gt; & lt; img src = '' alt = ' '& gt; / lt; / app-carusel-diapozitiv & gt;'.

 & Clasa Div = "C-App-carusel-diapozitiv" & GT;
  & lt; slot name = "imagine" & gt; / lt; / slot & gt;
& lt; / div & gt; 

05. Adăugați containerul de text al diapozitivului

Tot ce rămâne pentru componenta de diapozitive este de a construi recipientul de text. Vom folosi din nou sloturi, unul pentru titlul de diapozitive mai mare și unul pentru text obișnuit. De asemenea, vom folosi o directivă Vue.js numită "V-IF" pentru a adăuga logica, care face doar containerul de text dacă cel puțin unul dintre sloturi este transmis conținut. Adăugați acest fragment în "C-App-carusel-diapozitiv", chiar înainte de slotul "imagine".

 & Lt; div Clasa = "C-App-Carousel-Slide__Text-bloc"
V-IF = "Acest lucru. $ sloturi [" Titlu "] || acest lucru. $ sloturi [" text "]" & gt;
  & lt; h1 clasa = "C-App-carusel-slide__title"
  V-IF = "Acest lucru. $ sloturi [" Titlu "]" & GT;
  & lt; slot name = "titlu" & gt; / lt; / slot & gt;
  & lt; / h1 & gt;
  & lt; div clasa = "c-app-carusel-slide__text"
  V-IF = "Acest lucru. $ sloturi [" text "]" & gt;
  & lt; slot name = "text" & gt; / lt; / slot & gt;
  & lt; / div & gt;
& lt; / div & gt;

06. Creați fișiere de carusel

Înapoi în "SRC / Componente", creați un nou director numit "App-Carousel" și apoi în interiorul acesteia două fișiere noi: "App-carousel.vue" și "component.app-carousel.scss". Acestea vor deține cea de-a doua dintre cele două componente Vue.js: caruselul principal în sine.

07. Adăugați carusel CSS

Copiați conținutul lui "/support-files/step-07-slide.scss" în goale "component.app-carousel.scss". Acesta este SCS pentru componenta principală de carusel.

08. Creați componentă carusel

Apoi, în "App-carousel.vue", vom construi structura componentei caruselului. Importăm componenta "Appicon" și svg "săgeată" pentru o utilizare ulterioară în icoanele următoare și anterioare ale caruselului. Acestea lucrează împreună cu dependența "SVG-sprite-încărcător" de a genera un sistem de bază SVG pictograme, care funcționează utilizând SVG "simboluri" și elementul său "utilizare".

 & lt; șablon & lt; / șablon & gt;
& lt; script & gt;
Import Appicon de la
'@ / Componente / App-icon / App-icon'
Importați săgeată de la
'./../../ onesets/img/arrow.svg "
Export implicit {
  Nume: "App-carusel",
  componente: {
  Appicon.
  },
  date() {
  întoarcere {
  săgeată
  }
  }
}
& lt; / script & gt; 

09. Construiți șablonul de carusel

Să începem să adăugăm conținut la elementul de șablon gol. Domeniul principal de interes aici este elementul "C-App-carusel__container", pe care îl vom calcula în curând o lățime pentru numărul de diapozitive găsite în el. Apoi vom deplora recipientul folosind transformarea CSS: Translatex și tranziții pentru a simula mișcarea de diapozitive.

 & Clasa Div = "C-App-carusel" & GT;
  & Lt; Div Clasa = "C-App-Carousel__wrapper" & GT;
  & Lt; div Clasa = "C-App-Carousel__container" & GT;
  & lt; slot & gt; / lt; / slot & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / div & gt; 

10. Adăugați controalele și săgețile caruselului

Apoi, trebuie să adăugăm HTML pentru recipientul de control al caruselului și săgețile anterioare și următoare; Acestea din urmă utilizând sistemul de pictograme și SVG importate în pasul 8. Adăugați-le după elementul "C-App-carusel__wrapper".

 & lt; app-icon clasa = "C-App-icon-arrow-prev C-App-carusel__arrow" Utilizare = "arrow" / & gt;
& Lt; Clasa Div = "C-App-carusel__controls" & GT;
& lt; / div & gt;
& lt; App-icon Clasa = "C-App-icon-săgeată-următoare C-App-carusel__arrow" Utilizare = "săgeată" / & gt; 

11. Creați magazinul de date Carusel și adăugați proprietăți

Vom adăuga trei proprietăți noi la magazinul de date al componentei: "Slidetotal" va conține numărul total de diapozitive; "ActiveLideIndex" va înregistra indicele diapozitivului vizibil, astfel încât acesta să poată fi utilizat pentru a calcula poziția containerului; În timp ce autointervalul va înregistra cronometrul intervalului care va declanșa o tranziție automată de diapozitive. Toate acestea sunt setate la NULL, cu excepția "ActiveLideIndex", unde valoarea "0" indică faptul că primul diapozitiv ar trebui să fie diapozitivul implicit.

 Data () {
  întoarcere {
  săgeată,
  Slidetotal: Null,
  ActiveLideIndex: 0,
  Autointerval Autointerval: Null.
  }
} 

12. Calculați slidetotalul

Adăugați "REF =" Container "'la elementul" C-App-caroul__container "din șablon și apoi adăugați fragmentul de mai jos ca proprietate a obiectului component în sine. "Ref" este folosit pentru a oferi acces ușor la un element, care, în acest caz, este containerul, astfel încât să putem număra câte elemente copil (AKA diapozitive) pe care le are. Prezența acestei logici într-o funcție "montată ()" înseamnă că este apoi rulată automat când componenta este redată pentru prima dată.

 Montat () {
  acest.slidetotal =
  acest lucru. $ refs.container.children.length;
}

13. Calculați lățimea recipientului

În componentă, creați o nouă proprietate de obiect numită "calculată" și în interiorul acesteia, o nouă funcție numită "Containerwidth ()". Vom folosi acest lucru pentru a calcula lățimea recipientului de carusel pe baza figurii "slidetotale".

 calculat: {
   containerwidth () {
      Returnați acest lucru.slidetotal * 100 + '%';
   }
} 

14. Creați metode

Apoi, creați o altă proprietate obiect numită "metode" pentru a stoca funcțiile caruselului nostru. "Gotoslide () este o modalitate ușoară de a seta" ActiveLideIndex "din pasul 11," ISControactive (") returnează adevărații atunci când un indice de control se potrivește" ActiveLideIndex ", în timp ce" NextSlide () "și" Prevlosire () "va continua pur și simplu diapozitivele.

 Metode: {
  Gotoslide (SlideIndex) {
  acest.activeLideIndex = SlideIndex;
  },
  iscontroactive (controlindex) {
  retur controlindex - 1
  === acest.activeIndex;
  },
  Nextslide () {
  acest.activeLideIndex === acest lucru.
  Slidetotal - 1? acest.ActiveLideIndex.
  = 0: acest.activeLideIndex ++;
  },
  Prevlosire () {
  acest.activeLideIndex === 0? acest.
  ActiveLideIndex = the.slidetal - 1
  : acest.ActiveLideIndex -;
  }
} 

15. Calculați poziția containerului caruselului

Caruselul utilizează o valoare procentuală cu transformarea: TRANSLATEX și animație CSS pentru a simula tranziția de diapozitive. Adăugați fragmentul de mai jos la obiectul "calculat", astfel încât să putem calcula această valoare.

 ActiveLidedposition () {
  Return '-' + (100 / this.slidetal)
  * acest.ActiveLideIndex + '%';
} 

16. Compuneți CSS inline

Acum avem toate valorile pentru a poziționa corect recipientul de diapozitive de carusel, trebuie să construim CSS-ul pe care îl vom adăuga apoi la atributul său "stil". Vom adăuga această logică ca o altă funcție în obiectul "calculat".

 Containerstyle () {
  Return "Lățime: $ {this.containerwidth};
  Transformare: Translatex ($ {asta
  .ActiveLidedposition}); `

17. Legați Inline CSS

Adăugați fragmentul de mai jos la elementul "C-App-caroul__container" din șablon. Aceasta va lega valoarea returnată a "Containerstyle ()" din pasul anterior la atributul "stil" al containerului carusel, ceea ce înseamnă că CSS și, prin urmare, poziția sa va fi actualizată automat când lucrurile se schimbă.

 V-BIND: stil = "Containerstyle" 

18. Împingeți săgețile următoare / anterioare

Acum trebuie să adăugăm logica la săgețile următoare / anterioare, astfel încât metoda corectă din pasul 14 să fie apelată când se face clic pe fiecare săgeată respectivă. Fragmentul "Prevlosire ()" aparține elementului "C-App-Icon-Arrow-Prev", în timp ce "Nextslide () aparține elementului" C-App-icon-arrow-următor ". Directiva "V-on" este doar o modalitate ușoară de a crea ascultători de evenimente în vue.js, cu "clic" fiind evenimentul DOM pe care îl vizuam.

 // prev
V-ON: CLICK.NATIVE = "Prevlosire ()"
// Următorul
V-ON: CLICK.NATIVE = "NEXTSLIDE ()" 

19. Generați controale de carusel

Să generăm elementele de control și să le facem să arate diapozitivul corespunzător când este făcut clic. Adăugați elementul de mai jos în "C-App-carusel__controls". Directiva "V-pentru" este utilizată pentru a crea o cantitate de elemente de control care se potrivesc cu variabila "slideotală", în timp ce directiva "legată de V) permite clasa" activă activă "numai atunci când metoda" izcontroactivă "din pasul 14 se întoarce Adevărat. În cele din urmă, creăm un alt ascultător de evenimente prin "V-On", astfel încât, atunci când a apăsat, controlul solicită metoda "Gotoslide" și trece indexul său, care ar trebui să se potrivească cu indicele diapozitivului corespunzător.

 și lt; div v-pentru = "n în slidetotal"
: key = "n" v-bind: clasa =
"{" este-activ ": ISControactiv (N)}"
Clasa = "C-App-carusel__control"
V-ON: CLICK = "Gotoslide (N-1)" & Lt; / Div & gt; 

20. Componente de import

Să revenim acum la componenta "App.vue" de nivel superior și să importăm totul. Imediat după deschidere & lt; script & gt; Etichetă, importați componenta ".vue". Fișiere:

 Import AppCarousel din '@ / Componente / App-carusel / App-Carusel'
Import Apparouselide din '@ / Componente / App-Carusel-Slide / App-Carusel-Slide' 

Apoi, modificați obiectul "componentele", astfel încât acesta referă la aceste componente nou importate.

 Componente: {
   Appbutton,
   AppCarousel,
   AppCarouselide.
} 

În cele din urmă, în stil & gt; Etichetă, importați noul nostru SCS cu restul importurilor de componente.

 @import "/ Componente / App-Carusel /
componenta.app-carusel ";
@import "/ Componente / App-carusel-diapozitiv /
componenta.app-carusel-diapozitiv "; 

21. Adăugați carusel și diapozitive

În cele din urmă, să adăugăm noua componentă a caruselului și câteva diapozitive la aplicația principală. Încă în "App.vue", înlocuiți "în construcție" cu fragmentul de mai jos. Fiecare

& lt; App-carusel & GT;
  "App-carusel-diapozitiv & gt;
  & lt; șablon slot = "titlu" & gt; diapozitivul meu
  & lt; / șablon & gt;
  și slot de șablon = "text" & gt;
  & lt; p & gt; acesta este un diapozitiv de carusel. & lt; / p & gt;
  & lt; app-buton & gt; hai să mergem "/ app-buton & gt;
  & lt; / șablon & gt;
  & lt; img slot = "imagine"
  src = "./ Active / img / test-photo-01.jpg"
  Alt = "Fotografia mea de carusel" & GT;
  & lt; / App-carusel-diapozitiv & GT;
& lt; / App-carusel & gt; 

22. Adăugați flexibilitate caruselului

Acum avem un carusel de lucru vue.js, să adăugăm o anumită funcționalitate suplimentară, astfel încât să putem personaliza cu ușurință durata tranziției de diapozitive, proprietatea sa de sincronizare, declarând dacă diapozitivele ar trebui să fie auto-diapozitive și dacă da, cât de des. Redeschideți "App-carousel.vue" și adăugați proprietățile din fragmentul de mai jos la obiectul component.

 Props: {
  durata tranziției: {
  Tip: String,
  Implicit: "0.5S"
  },
  tranziție: {
  Tip: String,
  Implicit: "ușurință"
  }
} 

23. Modificați recipientul ()

Valorile transmise acestor proprietăți ar trebui să facă drumul spre CSS inline al caruselului din spate la pasul 17. Acum, să modificăm funcția calculată "Containestyle" pentru a vă asigura că acest lucru se întâmplă.

 Containerstyle () {
  Return `Lățime: $ {this.containerwidth};
  transforma:
  Translatex ($ {this.activeLidedosition});
  Funcție de tranziție:
  $ {this.transitionTiming};
  durata tranziției:
  $ {this.ransitionAration}; `
} 

24. Transmiteți datele la proprietățile caruselului

Snippetul de mai jos ilustrează modul în care vom transmite date acestor noi proprietăți la "App-carusel & GT; element în "App.vue". După adăugare, ar trebui să puteți trece orice valori doriți. De exemplu, o durată de "3.0" ar duce la o tranziție foarte lentă de diapozitive!

 & CARUSEL APP
Tranziție-durată = "0.25s"
Timpul de tranziție = "ușurință-în-out" & GT; 

25. Adăugarea de recuzită automată

Pentru auto-diapozitiv, trebuie să adăugăm două obiecte suplimentare la "recuzită" în "App-carousel.vue". "Auto" este fie "adevărat", fie "fals", care corespunde dacă caruselul ar trebui să continue să se auto-diapozitiv. "Autotiming" controlează timpul înainte de declanșatoarele auto-diapozitive, cu valoarea implicită fiind de 5000 de milisecunde.

 Auto: {
  Tip: String,
  Implicit: "false"
},
Autotiming: {
  Tip: String,
  Implicit: 5000.
} 

26. Inițieți auto-diapozitivul

Acum trebuie să inițiem auto-glisarea încărcăturii componentelor. În funcția de "montată ()" a caruselului, după conținutul existent, verificați dacă proprietatea "Auto" este setată la "Adevărat". Dacă da, creați un interval care declanșează metoda "Nextslide ()" în mod repetat odată ce valoarea "autotoming" a trecut.

 Dacă (acest.auto === "TRUE") {
  acest.autointerval = SetInterval (() = & gt; {
  acest.extslide ();
  }, parseint (this.autotiming));
} 

27. Anulați metoda de auto-glisiere

Evident, avem nevoie de un anumit mod ca utilizatorul să dezactiveze automat diapozitivul dacă și-au exprimat dorința de a opera manual caruselul. Primul pas spre aceasta este o nouă metodă de carusel numită "CANCELAUTOSLIDE". Acest lucru va anula pur și simplu intervalul creat în pasul anterior.

 CANCELAUTOSLIDE () {
   ClearInterval (acest lucruAutointerval);
} 

28. TRIGGER CANCELAUTOSLIDE

Dacă utilizatorul dă clic pe o săgeată sau un element de control, este rezonabil să presupunem că doresc să acționeze manual caruselul, așa că să numim metoda "Cancelautoslide" dacă oricare dintre aceste elemente este clic. Pentru a face acest lucru, pur și simplu adăugați "+ cancelautoslide ()" la fiecare directivă "V-on". Vedeți fragmentul de mai jos pentru un exemplu folosind săgeata "anterioară".

 V-ON: CLICK.NATIVE = "Prevlosire () + CANCELAUTOSLIDE ()" 

29. Treceți valori la recuzele auto-glisante

În cele din urmă, să trecem anumite valori proprietăților auto-glisante pe care le-am creat. Înapoi în "App.vue", adăugați snippetul de mai jos la "App-carusel & GT; element pentru a activa o auto-glisare la fiecare trei secunde.

 Auto = "Adevărat" Auto-Timing = "3000"

30. Finalizați construirea componentei caruselului

Anulați serverul de dezvoltare sau deschideți o nouă fereastră terminală și rulați "NPM Run Build" pentru a crea o versiune compilată, gata de producție a componentei carusel-ului dvs. Powered Vue.Js în directorul "DIST".

Acest articol a fost inițial publicat în numărul 269 al revistei Creative Web Design Web Designer. Cumpărați problema 269 aici sau Aboneaza-te la designerul web aici .

Eveniment de design web Genera Londra Returnează în perioada 19-21 septembrie 2018, oferind un program ambalat de difuzoare de conducere din industrie, o zi întreagă de ateliere și oportunități de rețele valoroase - nu ratați-o. Ia-ti Genera bilet acum .

Articole similare:

• 7 instrumente esențiale pentru designerul web de astăzi
• Adăugați un efect de glitch pe site-ul dvs.
• 6 pagini uimitoare "despre" pentru a vă inspira