Δημιουργήστε ένα εύκαμπτο στοιχείο καρουσέλ

Vue.js έχει έρθει σε άλματα και τα όρια πρόσφατα, να γίνει το έκτο πιο διχασμένο έργο μέχρι στιγμής Github Τη στιγμή της γραφής, ακόμη και πριν από το ReactJs του Facebook. Είναι ασφαλές να πούμε ότι είναι γρήγορο να γίνει ένα mainstay στο Ανάπτυξη διαδικτύου , και μια αξιόπιστη κίνηση Πλαίσιο JavaScript για χρήση σε έργα.

Σε αυτό το σεμινάριο, θα χρησιμοποιούμε vue.js για να δημιουργήσετε ένα απλό συστατικό καρουσέλ. Αυτό το στοιχείο θα αποδεχθεί μια σειρά διαφορετικών ιδιοτήτων, επιτρέποντάς σας να τσιμπήσετε μερικές βασικές ρυθμίσεις, όπως η ταχύτητα μετάβασης, ο τύπος μετάβασης και αν το καρουσέλ θα πρέπει να μεταβαίνουν αυτόματα τις διαφάνειες.

Εάν όλα αυτά ακούγονται πολύ δύσκολα, α οικοδόμος ιστότοπου Το εργαλείο μπορεί να είναι περισσότερο το πράγμα σας. Ευτυχής να δημιουργήσετε έναν πιο περίπλοκο χώρο; Χρειάζεσαι web hosting που μπορεί να αντιμετωπίσει.

• Επιταχύνετε την απόδοση με το vue.js

Για να ξεκινήσετε, Κατεβάστε τα αρχεία του έργου εδώ (και να τα αποθηκεύσετε αποθήκευση σύννεφων ) και ανοίξτε τον κατάλογο "Ιστοσελίδα" στον προτιμώμενο επεξεργαστή κειμένου. Εν τω μεταξύ, στο τερματικό, το CD σε «πρότυπο ιστότοπου» και στη συνέχεια τρέχει 'εγκατάσταση NPM' για να εγκαταστήσετε τα έργα NODE.JS εξαρτήσεις. Τέλος, τρέξτε 'npm run dev' για να ξεκινήσετε ένα διακομιστή ανάπτυξης, ώστε να μπορείτε να δείτε το έργο σας στο πρόγραμμα περιήγησης. Συνήθως αυτό θα ήταν στο «localhost: 8080».

01. Δημιουργία αρχείων ολίσθησης καρουσέλ

Στις «SRC / Components», δημιουργήστε ένα νέο κατάλογο που ονομάζεται «App-Carousel-Slide» και σε δύο αρχεία: «App-Carousel-Slide.Vue» και «Component.App-Carousel-Slide.scss». Αυτά θα περιέχουν τα πρώτα από τα δύο νέα στοιχεία VUE.Js που θα δημιουργήσουμε, τα οποία όταν χρησιμοποιούνται μαζί θα δημιουργήσουν το συστατικό μας καρουσέλ.

02. Προσθέστε το Carousel Slide SCSS

Από το πακέτο αρχείων, αντιγράψτε τα περιεχόμενα του '/support-files/step-02-slide.scss' σε 'component.app-carousel-slide.scss'. Αυτό είναι το SCSS για το στοιχείο ολίσθησης και χρησιμοποιεί την ιδιότητα "Flex-Grow" για να βεβαιωθείτε ότι κάθε διαφάνεια επεκτείνεται για να γεμίσει το γονικό στοιχείο του.

03. Δημιουργήστε το στοιχείο ολίσθησης

Στο κενό αρχείο "App-Carousel-Slide.Vue", προσθέστε το απόσπασμα παρακάτω για να δημιουργήσετε τη δομή του συστατικού του VUE.js. Θα το χρησιμοποιήσουμε ως βάση για την κατασκευή της διαφάνειας καρουσέλ.

 & lt; template & gt; / template & gt;
& lt; script & gt;
Εξαγωγή προεπιλογής {
  Όνομα: 'app-carousel-slide'
}
& lt; / script & gt; 

04. Προσθέστε μια υποδοχή προτύπου για τις εικόνες Slide Carousel

Στο άδειο & lt; template & gt; Στοιχείο της διαφάνειας καρουσέλ, θα προσθέσουμε ένα «div» στοιχείο για να αντιπροσωπεύσουμε τη διαφάνεια, μαζί με ένα ειδικό στοιχείο υποδοχής που θα ονομάσουμε την «εικόνα». Στο Vue.Js, οι υποδοχές σας επιτρέπουν να συμπεριφέρετε το δικό σας περιεχόμενο με το πρότυπο του συστατικού χωρίς να την επεξεργαστείτε. Σε αυτή την περίπτωση, χρησιμοποιούνται έτσι ώστε να μπορούμε αργότερα να περάσουμε την εικόνα για το φόντο της ολίσθησης, έτσι το τελικό αποτέλεσμα, όταν τελικά χρησιμοποιείται, θα μοιάζει με "app-carousel-slide & gt" img src = 'alt =' img src = 'alt =' img src = 'alt =' img src = 'alt =' '& gt; "/ app-carousel-slide & gt;'.

 & lt; div class = "c-app-carousel-slide" & gt;
  & lt; όνομα υποδοχή = "εικόνα" & gt; / slot & gt;
& lt; / div & gt; 

05. Προσθέστε το δοχείο διαφανειών

Το μόνο που παραμένει για το στοιχείο διαφανειών είναι η δημιουργία του δοχείου κειμένου. Θα χρησιμοποιήσουμε ξανά τα Slots, ένα για τον μεγαλύτερο τίτλο ολίσθησης και ένα για κανονικό κείμενο. Θα χρησιμοποιήσουμε επίσης μια οδηγία Vue.js που ονομάζεται «V-IF» για να προσθέσει λογική, η οποία αποκτά μόνο το δοχείο κειμένου εάν τουλάχιστον μία από τις εγκοπές έχει περάσει περιεχόμενο. Προσθέστε αυτό το απόσπασμα στο 'C-App-Carousel-Slide', λίγο πριν την υποδοχή της εικόνας.

 & lt; div class = "c-app-carousel-slide __text-block"
V-IF = "Αυτό. $ slots [" τίτλος "] || Αυτό. $ slots ['text']" & gt;
  & lt; h1 class = "c-app-carousel-slide__tle"
  V-IF = "Αυτό, $ Slots ['Title']" & GT;
  & lt; όνομα υποδοχή = "τίτλος" & gt; / lt; / slot & gt;
  & lt; / h1 & gt;
  & lt; div class = "c-app-carousel-slide__text"
  V-IF = "Αυτό, $ Slots ['Text']" & GT;
  & lt; όνομα υποδοχή = "κείμενο" & gt; / slot & gt;
  & lt; / div & gt;
& lt; / div & gt;

06. Δημιουργία αρχείων καρουσέλ

Επιστροφή στο 'SRC / Components', δημιουργήστε ένα νέο κατάλογο που ονομάζεται 'App-Carousel' και στη συνέχεια μέσα σε αυτό δύο νέα αρχεία: 'app-carousel.vue' και 'component.app-carousel.scss'. Αυτά θα κρατήσουν το δεύτερο από τα δύο συστατικά του Vue.js: το κύριο καρουσέλ.

07. Προσθέστε το Carousel CSS

Αντιγράψτε τα περιεχόμενα του '/support-files/step-07-slide.scs' στο κενό 'component.app-carousel.scss'. Αυτό είναι το SCSS για το κύριο συστατικό καρουσέλ.

08. Δημιουργία συστατικού καρουσέλ

Στη συνέχεια, στο "App-Carousel.Vue", πρόκειται να οικοδομήσουμε τη δομή του συστατικού καρουσέλ. Εισάγουμε το συστατικό του appicon και το "βέλος" svg για μεταγενέστερη χρήση στα επόμενα και προηγούμενα εικονίδια του Carousel. Αυτά συνεργάζονται μαζί με την εξάρτηση «SVG-Sprite-φορτωτής» για να δημιουργήσει ένα βασικό σύστημα SVG εικονίδιο, το οποίο λειτουργεί χρησιμοποιώντας το SVG 'Symbols' και το στοιχείο "χρήσης".

 & lt; template & gt; / template & gt;
& lt; script & gt;
Εισαγωγή appicon από
'@ / components / app-icon / app-icon'
Εισαγωγή βέλους από
'./../../assets/IMG/ARROW.SVG'
Εξαγωγή προεπιλογής {
  Όνομα: «App-Carousel»,
  συστατικά: {
  appicon
  },
  δεδομένα () {
  ΕΠΙΣΤΡΟΦΗ {
  βέλος
  }
  }
}
& lt; / script & gt; 

09. Κατασκευάστε το πρότυπο καρουσέλ

Ας αρχίσουμε να προσθέτουμε περιεχόμενο στο κενό στοιχείο προτύπου. Ο κύριος τομέας ενδιαφέροντος εδώ είναι το στοιχείο «C-App-Carousel__container», το οποίο θα υπολογίσουμε σύντομα ένα πλάτος για τη βάση του αριθμού των διαφανειών που βρίσκονται μέσα σε αυτό. Στη συνέχεια θα μετακινήσουμε το δοχείο χρησιμοποιώντας το CSS μετασχηματισμό: μεταφράζεται και μεταβάσεις για την προσομοίωση της κίνησης της ολίσθησης.

 & lt; div class = "c-app-carousel" & gt;
  & lt; div class = "c-app-carousel__wrapper" & gt;
  & lt; div class = "c-app-carousel__container" & gt;
  & lt; slot & gt; / slot & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / div & gt; 

10. Προσθέστε τα χειριστήρια και τα βέλη καρουσέλ

Στη συνέχεια, πρέπει να προσθέσουμε το HTML για το δοχείο ελέγχου Carousel και τα προηγούμενα και τα επόμενα βέλη. Το τελευταίο χρησιμοποιώντας το σύστημα εικονιδίων και το SVG που εισάγονται στο βήμα 8. Προσθέστε τα στοιχεία μετά το στοιχείο "C-App-Carousel__Wrapper".

 & lt; class app-icon = "c-app-icon-arrow-prev c-app-carousel__arrow" χρήση = "βέλος" / & gt;
& lt; div class = "c-app-carousel__controls" & gt;
& lt; / div & gt;
& lt; app-icon class = "c-app-icon-arrow-επόμενο c-app-carousel__arrow" χρήση = "arrow" / & gt; 

11. Δημιουργήστε το κατάστημα δεδομένων Carousel και προσθέστε ιδιότητες

Θα προσθέσουμε τρεις νέες ιδιότητες στο κατάστημα δεδομένων του συστατικού: «slidetotal» θα συγκρατήσει τον συνολικό αριθμό διαφανειών. Το 'ActivesLideIndex' θα καταγράψει το δείκτη της ορατής διαφάνειας, ώστε να μπορεί να χρησιμοποιηθεί για τον υπολογισμό της θέσης του δοχείου. Ενώ η Autointerval θα καταγράψει τον χρονοδιακόπτη διαστήματος που θα ενεργοποιήσει μια αυτόματη μετάβαση διαφανειών. Όλα αυτά είναι καθορισμένα σε μηδενικά, με εξαίρεση το «ActiveSlideindex», όπου η τιμή «0» υποδεικνύει ότι η πρώτη διαφάνεια πρέπει να είναι η προεπιλεγμένη διαφάνεια.

 Δεδομένα () {
  ΕΠΙΣΤΡΟΦΗ {
  βέλος,
  SlideTotal: Null,
  ActivesLideIndex: 0,
  AUTOINTERVAL: NULL
  }
} 

12. Υπολογίστε το slidetotal

Προσθέστε το "Ref =" Container "στο στοιχείο 'C-App-Carousel__container' στο πρότυπο και στη συνέχεια προσθέστε το απόσπασμα παρακάτω ως ιδιότητα του ίδιου του αντικειμένου συστατικού. Το «Ref» χρησιμοποιείται για την εύκολη πρόσβαση σε ένα στοιχείο, το οποίο σε αυτή την περίπτωση είναι το δοχείο, ώστε να μπορέσουμε να μετρήσουμε πόσα στοιχεία παιδιού (AKA διαφάνειες) που έχει. Η παρουσία αυτής της λογικής σε μια "συναρμολογημένη ()" σημαίνει ότι λειτουργεί αυτόματα όταν το συστατικό γίνεται για πρώτη φορά.

 τοποθετημένο () {
  αυτό.slidetotal =
  αυτό. $ refs.container.chender.length,
}

13. Υπολογίστε το πλάτος του δοχείου

Στο στοιχείο, δημιουργήστε ένα νέο αντικείμενο ιδιοκτησίας που ονομάζεται «υπολογίζεται» και μέσα σε αυτό, μια νέα λειτουργία που ονομάζεται «Containerwidth ()». Θα το χρησιμοποιήσουμε για να υπολογίσουμε το πλάτος του δοχείου καρουσέλ με βάση το σχήμα "slidetotal".

 Υπολογίζεται: {
   εμπορευματοκιβώτιο () {
      Επιστρέψτε αυτό.SlideTotal * 100 + '%'.
   }
} 

14. Δημιουργία μεθόδων

Στη συνέχεια, δημιουργήστε ένα άλλο αντικείμενο ιδιοκτησίας που ονομάζεται «μεθόδους» για να αποθηκεύσετε τις λειτουργίες του Carousel. Το «gotoslide ()» είναι ένας εύκολος τρόπος ρύθμισης του «ActivesLideIndex» από το βήμα 11, το «Iscontrolactive ()» επιστρέφει όταν ο δείκτης ενός ελέγχου αντιστοιχεί σε «ActivesLideIndex», ενώ το «Nextslide ()» και το «Prevslide ()» θα κάνει απλώς κύκλο τις διαφάνειες.

 Μέθοδοι: {
  gotoslide (slideindex) {
  αυτό.activeslideindex = slideindex;
  },
  iscontrolactive (controlindex) {
  Επιστρέψτε το ControlLIDEX - 1
  === αυτό.ActiveSlideIndex;
  },
  nextslide () {
  αυτό.ActiveSlideIndex === αυτό.
  SlideTotal - 1; αυτό.activeslideindex
  = 0: This.activeslideindex ++;
  },
  prevslide () {
  this.activeslideindex === 0; Αυτό.
  ActivesLideIndex = αυτό.slidetotal - 1
  : This.activeslideindex -;
  }
} 

15. Υπολογίστε τη θέση του δοχείου του καρουσέλ

Το καρουσέλ χρησιμοποιεί μια ποσοστιαία τιμή με μετασχηματισμό: Translatex και CSS Animation για την προσομοίωση της μετάβασης Slide. Προσθέστε το παρακάτω απόσπασμα στο αντικείμενο του «υπολογισμένου», ώστε να υπολογίσουμε αυτήν την τιμή.

 ActivesLidePosition () {
  Επιστροφή '-' + (100 / αυτό.slidetotal)
  * αυτό.ACTACTIESLIDEIDEX + '%'.
} 

16. Σύνθεση inline CSS

Τώρα έχουμε όλες τις αξίες για να τοποθετήσουμε σωστά το δοχείο διαφανών καρουσέλ, πρέπει να κατασκευάσουμε το CSS που θα προσθέσουμε στη συνέχεια στο χαρακτηριστικό του "στυλ". Θα προσθέσουμε αυτή τη λογική ως μια άλλη λειτουργία στο αντικείμενο "υπολογισμένου".

 εμπορευματοκιβώτια () {
  Επιστρέψτε το πλάτος: $ {this.containerwidth};
  Μετατροπή: Translatex ($ {αυτό
  .activeSlidePosition}); `

17. Bind inline CSS

Προσθέστε το παρακάτω απόσπασμα στο στοιχείο "C-App-Carousel__container" στο πρότυπο. Αυτό θα δεσμεύσει την επιστρεφόμενη αξία των «εμπορευματοκιβωτίων () από το προηγούμενο βήμα προς το χαρακτηριστικό« στυλ »του δοχείου καρουσέλ, που σημαίνει ότι το CSS του και επομένως η θέση του θα ενημερωθεί αυτόματα όταν αλλάζουν τα πράγματα.

 V-Bind: Style = "Containerstyle" 

18. Συνδέστε τα επόμενα / προηγούμενα βέλη

Τώρα πρέπει να προσθέσουμε λογική στα επόμενα / προηγούμενα βέλη έτσι ώστε η σωστή μέθοδος από το βήμα 14 να καλείται όταν έχει πατηθεί κάθε αντίστοιχο βέλος. Το αποσπάσματα «PrevSlide ()» ανήκει στο στοιχείο «C-App-Icon-Arrow-Προηγούμενο», ενώ το «Nextslide ()» ανήκει στο στοιχείο "C-App-App-Asrow-Asrow-Ass". Η οδηγία «V-ON» είναι απλά ένας εύκολος τρόπος για να ρυθμίσετε τους ακροατές συμβάντων στο Vue.js, με το "κλικ" να είναι το γεγονός DOM που στοχεύουμε.

 // prev
V-ON: click.nive = "prevslide ()"
// Επόμενο
V-ON: click.nive = "nextslide ()" 

19. Δημιουργία ελέγχων καρουσέλ

Ας δημιουργήσουμε τα στοιχεία ελέγχου και να τα κάνουμε να δείξουν την αντίστοιχη διαφάνεια όταν κάνετε κλικ. Προσθέστε το παρακάτω στοιχείο στο 'C-App-Carousel__Controls'. Η οδηγία «V-για» χρησιμοποιείται για τη δημιουργία ενός ποσού στοιχείων ελέγχου που ταιριάζουν με τη μεταβλητή «ολισθητήρα», ενώ η οδηγία «V-δεσμευτής» επιτρέπει την κατηγορία «Ενεργοποιημένη» μόνο όταν η μέθοδος "iscontrolactive" από το βήμα 14 επιστρέφει αληθής. Τέλος, δημιουργούμε έναν άλλο ακροατή εκδήλωσης μέσω του «V-ON», όταν κάνετε κλικ, ο έλεγχος καλεί τη μέθοδο «gooslide» και περνάει το δείκτη του, το οποίο θα πρέπει να ταιριάζει με το δείκτη αντίστοιχης διαφάνειας.

 & lt; div v-for = "n in slidetotal"
: κλειδί = "n" v-bind: class =
"{" είναι ενεργό ": iscontrolactive (n)}"
class = "c-app-carousel__control"
V-ON: click = "gotoslide (n - 1)" & gt; / div & gt; 

20. Στοιχεία εισαγωγής

Ας επιστρέψουμε τώρα στο κορυφαίο επίπεδο "app.vue" και να εισάγετε τα πάντα. Ακριβώς μετά το άνοιγμα & lt; script & gt; Ετικέτα, εισαγωγή του συστατικού '.. αρχεία:

 Εισαγωγή appcarousel από '@ / components / app-carousel / app-carousel'
Εισαγωγή appcarouselslide από '@ / components / app-carousel-slide / app-carousel-slide' 

Στη συνέχεια, η τροποποίηση του αντικειμένου «Components», ώστε να αναφέρεται αυτά τα νέα εισαγόμενα εξαρτήματα.

 Στοιχεία: {
   appbutton,
   appcarousel,
   appcarouselslide
} 

Τέλος, στο & lt; style & gt; Ετικέτα, εισάγετε τα νέα SCSS μας με τις υπόλοιπες εισαγωγές εξαρτημάτων.

 @ import "/ components / app-carousel /
component.app-carousel ";
@import "/ συστατικά / εφαρμογή-καρουσέλ-slide /
component.app-carousel-slide "; 

21. Προσθέστε καρουσέλ και διαφάνειες

Τέλος, ας προσθέσουμε το νέο συστατικό μας καρουσέλ και μερικές διαφάνειες στην κύρια εφαρμογή. Ακόμα στο "app.vue", αντικαταστήστε το «υπό κατασκευή» με το απόσπασμα παρακάτω. Κάθε app-carousel-slide & gt; το στοιχείο αντιπροσωπεύει μια ενιαία διαφάνεια. Προσθέστε όσα θέλετε, αντικαθιστώντας το κείμενο ή την εικόνα όπου επιθυμείτε. Περιλαμβάνονται στο "test-photo-01.jpg" στη "δοκιμή-Photo-05.jpg". Μόλις τελειώσει η κατάρτιση, όλα πρέπει τώρα να λειτουργήσουν. Huzzah!

& lt; app-carousel & gt;
  & lt; app-carousel-slide & gt;
  & lt; template slot = "τίτλος" & gt;
  & lt; / template & gt;
  & lt; template slot = "text" & gt;
  & lt; p & gt; αυτή είναι μια διαφάνεια καρουσέλ. & lt; / p & gt;
  & lt; app-button & gt; ας πάμε & lt; / app-button & gt;
  & lt; / template & gt;
  & lt; img slot = "εικόνα"
  SRC = "./ Περιουσιακά στοιχεία / IMG / Test-Photo-01.jpg"
  alt = "Η φωτογραφία καρουσέλ μου" & gt;
  & lt; / app-carousel-slide & gt;
& lt; / app-carousel & gt; 

22. Προσθέστε ευελιξία στο καρουσέλ

Τώρα έχουμε μια εργασία vue.js carousel, ας προσθέσουμε κάποια πρόσθετη λειτουργικότητα, ώστε να μπορέσουμε εύκολα να προσαρμόσουμε τη διάρκεια της μετάβασης της διαφανειών, το περιουσιακό στοιχείο του χρονισμού, που δηλώνει εάν οι διαφάνειες θα πρέπει να γλιστρήσουν αυτόματα, και αν ναι, πόσο συχνά. Reopen 'app-carousel.vue' και προσθέστε τις ιδιότητες στο απόσπασμα κάτω από το αντικείμενο του συστατικού.

 στηρίγματα: {
  Μεταφορά: {
  Τύπος: String,
  Προεπιλογή: '0.5S'
  },
  Μεταδοτική: {
  Τύπος: String,
  Προεπιλογή: 'Ευκολία'
  }
} 

23. Τροποποίηση εμπορευματοκιβωτίων ()

Οι τιμές που διέρχονται σε αυτές τις ιδιότητες θα πρέπει να κάνουν το δρόμο τους προς την ενσωματωμένη CSS του Carousel από πίσω στο βήμα 17. Τώρα ας τροποποιήσουμε τη συνάρτηση "Containerstyle" για να βεβαιωθείτε ότι αυτό συμβαίνει.

 εμπορευματοκιβώτια () {
  Επιστροφή: $ {this.containerwidth};
  μεταμορφώνω:
  translatex ($ {αυτό.ActiveSlidePosition});
  Λειτουργία χρονισμού μετάβασης:
  $ {αυτό.ThanSitionTiming};
  Διάρκεια μετάβασης:
  $ {αυτό.TransitionDuration} · `
} 

24. Περάστε τα δεδομένα στις ιδιότητες καρουσέλ

Το παρακάτω απόσπασμα απεικονίζει τον τρόπο με τον οποίο θα περάσουμε τα δεδομένα σε αυτές τις νέες ιδιότητες στο & lt; app-carousel & gt; στοιχείο στο 'app.vue'. Μόλις προστεθεί, θα πρέπει να μπορείτε να περάσετε οποιεσδήποτε τιμές που επιθυμείτε. Για παράδειγμα, μια διάρκεια "3.0s" θα οδηγούσε σε μια πολύ αργή μετάβαση διαφανειών!

 & lt; app-carousel
μετάβαση-διάρκεια = "0,25s"
TRASTITE-Timing = "Επανεξέταση" & GT; 

25. Προσθέτοντας τα στηρίγματα αυτόματης ολίσθησης

Για την αυτόματη διαφάνεια, πρέπει να προσθέσουμε δύο επιπλέον αντικείμενα σε 'props' στο 'app-carousel.vue'. Το «αυτόματο» είναι είτε «αληθινό» είτε «ψευδές», το οποίο αντιστοιχεί σε εάν το καρουσέλ θα πρέπει να συνεχίσει να ολισθαίνει αυτόματα. Το "Autotiming" ελέγχει τον χρόνο πριν από την αυτόματη ολίσθηση ενεργοποιητών, με την προεπιλεγμένη τιμή να είναι 5000 χιλιοστά του δευτερολέπτου.

 Αυτόματη: {
  Τύπος: String,
  Προεπιλογή: 'FALSE'
},
Autotiming: {
  Τύπος: String,
  Προεπιλογή: 5000
} 

26. Ξεκινήστε την αυτόματη διαφάνεια

Τώρα πρέπει να ξεκινήσουμε την αυτόματη διαφάνεια στο φορτίο του συστατικού. Στη λειτουργία του Carousel, μετά το υπάρχον περιεχόμενο, ελέγξτε εάν η ιδιότητα "Auto" έχει οριστεί σε «αληθές». Εάν ναι, δημιουργήστε ένα διάστημα που ενεργοποιεί τη μέθοδο "nextslide ()" επανειλημμένα μόλις περάσει η τιμή "autotiming".

 εάν (this.auto === 'true') {
  that.autointerval = setinterval (() = & gt; {
  αυτό.NEXTSLIDE ();
  }, Parseint (αυτό.Autotoiming));
} 

27. Ακύρωση της μεθόδου αυτόματης ολίσθησης

Προφανώς, χρειαζόμαστε κάποιο τρόπο για τον χρήστη να απενεργοποιήσει την αυτόματη διαφάνεια αν έχει εκφράσει μια επιθυμία να λειτουργήσει το καρουσέλ χειροκίνητα. Το πρώτο βήμα προς την κατεύθυνση αυτή είναι μια νέα μέθοδος καρουσέλ που ονομάζεται «ακύρωση». Αυτό θα ακυρώσει απλά το χρονικό διάστημα που δημιουργήθηκε στο προηγούμενο βήμα.

 ακύρωσης ακυροειδούς () {
   clearinterval (this.autointerval).
} 

28. Εκκίνηση ακύρωσης ακύρωσης

Εάν ο χρήστης κάνει κλικ σε ένα βέλος ή στοιχείο ελέγχου, είναι λογικό να υποθέσουμε ότι επιθυμούν να λειτουργήσουν το καρουσέλ με το χέρι, οπότε ας καλέσουμε τη μέθοδο «ακύρωσης» εάν κάποιο από αυτά τα στοιχεία είναι κλικ. Για να γίνει αυτό, απλώς προσθέστε το '+ ακύρωση ()' σε κάθε οδηγία 'V-ON'. Δείτε το απόσπασμα παρακάτω για παράδειγμα χρησιμοποιώντας το βέλος "προηγούμενης" διαφανειών.

 V-ON: click.nive = "Prevslide () + ακύρωση ()" 

29. Περάστε τιμές στην Auto-Slide στηρίγματα

Τέλος, ας περάσουμε κάποιες αξίες στις ιδιότητες αυτόματης διαφάνειας που δημιουργήσαμε. Πίσω στο 'app.vue', προσθέστε το παρακάτω απόσπασμα στο & lt; app-carousel & gt; στοιχείο για να ενεργοποιήσετε μια αυτόματη διαφάνεια κάθε τρία δευτερόλεπτα.

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

30. Τελειώστε την οικοδόμηση του συστατικού καρουσέλ

Ακύρωση του διακομιστή ανάπτυξης ή ανοίξτε ένα νέο παράθυρο τερματικού και εκτελέστε το 'NPM Run Build' για να δημιουργήσετε μια συλλογή, έτοιμη από την παραγωγή έτοιμη έκδοση του συστατικού Carousel Powered Carousel στον κατάλογο 'Dist'.

Αυτό το άρθρο δημοσιεύθηκε αρχικά σε εξέταση 269 του δημιουργικού σχεδιασμού Web Creative Web Design Magazine. Αγοράστε τεύχος 269 εδώ ή Εγγραφείτε στο Web Designer εδώ .

Web Design Event παράγω Λονδίνο Επιστρέφει στις 19-21 Σεπτεμβρίου 2018, προσφέροντας ένα συσκευασμένο πρόγραμμα κορυφαίων ομιλητών της βιομηχανίας, μια ολόκληρη μέρα εργαστηρίων και πολύτιμες ευκαιρίες δικτύωσης - μην το χάσετε. Πάρε το δικό σου παράγω εισιτήριο τώρα .

Σχετικά Άρθρα:

• 7 βασικά εργαλεία για τον σημερινό σχεδιαστή ιστοσελίδων
• Προσθέστε μια επίδραση σφάλματος στον ιστότοπό σας
• 6 εκπληκτικές σελίδες 'για' για 'για να σας εμπνεύσει