How-To: Un carrousel simple avec Vue!

Ou, ce que j'ai appris à construire mon propre carrousel.

https://acollectionofatoms.github.io/vue-carousel-example/

Des carrousels, des diaporamas, ou peut-être simplement des "curseurs". Cette composante d’interface utilisateur omniprésente a gagné sa place dans la conception Web et, en tant que telle, il existe une pléthore d’implémentations dans diverses technologies.

Vous constaterez que Vue.js n’est pas différent.

Mais!

Avant de vous installer npm encore - une autre dépendance, je vous implore de considérer le courant déjà à votre disposition étant donné un projet Vue hors de la boîte.

Entrer…

Le groupe de transition

Ceux qui viennent de React connaissent peut-être le concept de groupe de transition. Plutôt que d'être un add-on, le groupe de transition (pour le meilleur ou pour le pire) est pré-packagé avec Vue. En fait, l'API de transition enrichie est immédiatement disponible après une nouvelle installation.

Pour ceux qui ne sont pas familiers, un groupe de transition est similaire à un composant encapsuleur de transition: les deux permettent l'animation de la suppression, de l'ajout et (dans le cas d'un groupe de transition) le mouvement des éléments en eux-mêmes.

Nous allons plonger plus profondément dans le groupe de transition dans une minute, mais commençons par introduire et rendre hommage à ce qui rend la construction de votre propre carrousel FACILE.

FLIP et Freedom (d'un autre paquet)

Alors, qu'est-ce qui fait un carrousel? Vous avez un gros élément (généralement une image) qui glisse dans la mise au point (ou la vue). En termes simples, le mouvement sans faille d’un élément à un autre poste est sans doute la partie la plus importante. Si vous explorez la section de transition de la documentation Vue, vous verrez des animations plutôt délirantes.

Par les docs…

Cela peut sembler magique, mais sous le capot, Vue utilise une simple technique d’animation appelée FLIP pour effectuer une transition en douceur des éléments de leur ancienne position à leur nouvelle position à l’aide de transformations.

Et ceci est notre billet pour une terre sans dépendance. La technique FLIP intégrée nous fournit déjà le pain et le beurre de ce qui fait d’un manège un manège!

Disclamer!

Avant de commencer, je voudrais insister sur le mot simple dans le titre.

Nous parlons nus-2D-carrousel. Celui qui serait immédiatement reconnu par tout utilisateur actuel du World Wide Web. Pas du tout dissemblable de ce carrousel bootstrap trouvé ici.

Il n’existe pas de gadgets sophistiqués et nous n’implémentons pas la fonctionnalité de glissement tactile. Cet article décrit simplement une base potentielle pour un carrousel.

Avec ça à l'écart…

Commencer

Pour lancer rapidement les choses, nous allons utiliser nos codes de triche terminaux AKA avec l’outil d’échafaudage Vue officiellement pris en charge.

Une fois que vous avez installé la CLI, le prototypage devient un jeu d'enfant.

Le modèle webpack-simple est particulièrement utile pour les prototypes rapides et est donc idéal pour faire avancer les choses.

Une fois que nous serons opérationnels, nous commencerons avec App.vue.

App.vue est jolie

Vraiment gentil. Ok, supprimons-le et recommençons à zéro.

Mhm

Et modifiez app.js en conséquence…

Et nous sommes à un nouveau départ:

Une photo de rien.

D'accord, super.

Le