Cómo hacerlo: ¡Un carrusel simple con Vue!

O lo que aprendí construyendo mi propio carrusel.

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

Carruseles, presentaciones de diapositivas, o tal vez simplemente "control deslizante". Este componente de interfaz de usuario ubicuo se ha ganado su lugar en el diseño web y, como tal, hay una gran cantidad de implementaciones en diversas tecnologías.

Encontrará que Vue.js no es diferente.

¡Pero!

Antes de instalar npm otra dependencia, le ruego que considere la potencia que ya tiene a su disposición dado un proyecto Vue listo para usar.

Entrar…

El grupo de transición

Los que vienen de React pueden estar familiarizados con el concepto de un grupo de transición. En lugar de ser un complemento, el grupo de transición (para bien o para mal) está preempaquetado con Vue y, de hecho, la rica API de transición está disponible inmediatamente después de una instalación nueva.

Para aquellos que no están familiarizados, un grupo de transición es similar a un componente envoltorio de transición: ambos permiten la animación de la eliminación, la adición y (en el caso de un grupo de transición) el movimiento de elementos dentro de ellos mismos.

Nos sumergiremos más profundamente en el grupo de transición en un minuto, pero primero presentaremos y rendiremos homenaje a lo que hace que construir su propio carrusel sea FÁCIL.

FLIP y Freedom (de otro paquete)

Entonces, ¿qué hace un carrusel? Tiene un elemento grande (generalmente una imagen) que se desliza dentro y fuera de foco (o vista). En pocas palabras, el movimiento continuo de un elemento a otra posición es posiblemente la parte más importante. Si husmea la sección de transición de los documentos de Vue, verás algunas animaciones bastante elegantes.

Por los documentos ...

Esto puede parecer mágico, pero debajo del capó, Vue está utilizando una técnica de animación simple llamada FLIP para hacer una transición suave de los elementos de su posición anterior a su nueva posición usando transformaciones.

Y este es nuestro boleto a tierras menos dependientes. ¡La técnica FLIP incorporada ya nos proporciona el pan y la mantequilla de lo que hace que un carrusel sea un carrusel!

Descargo de responsabilidad!

Antes de comenzar, me gustaría enfatizar la palabra simple en el título.

Estamos hablando de bare-bones-2d-carrusel. Uno que sería inmediatamente reconocido por cualquier usuario actual de la red mundial. Para nada diferente a este carrusel de arranque encontrado aquí.

No hay campanas y silbatos elegantes, y no estamos implementando la funcionalidad de deslizamiento táctil. Este artículo solo describe una base potencial para un carrusel.

Con eso fuera del camino ...

Empezando

Para comenzar rápidamente, vamos a poner en nuestros códigos de trucos de terminales rad AKA usando la herramienta de andamiaje Vue oficialmente compatible.

Después de instalar la CLI, la creación de prototipos se convierte en una brisa.

La plantilla webpack-simple es particularmente útil para prototipos rápidos y, como tal, es perfecta para que todo funcione.

Una vez que estemos en funcionamiento, comenzaremos con App.vue

App.vue es bonito

Tan agradable. Ok, eliminemos esto y comencemos de nuevo.

mhm

Y modifique app.js en consecuencia ...

Y ahora estamos en un nuevo comienzo:

Una imagen de nada.

Vale genial.

El

En nuestro archivo Carousel.vue, podemos agregar algunas marcas como esta:

Y quizás ahora muy bien lo has hecho.

Nuestro jugador clave, el grupo de transición, tiene una propiedad de etiqueta que nos permite representarlo como un div (en lugar del intervalo predeterminado). También le damos un nombre de clase y colocamos cuidadosamente nuestro div de diapositivas dentro de él.

Utilizando la directiva v-for en la diapositiva, realizamos el procesamiento de listas reactivas y estamos seguros de pasar una clave: para cada diapositiva para que Vue pueda realizar un seguimiento de cada nodo. Manteniendo las cosas simples, cada diapositiva mostrará su título usando {{slide.title}} dentro de un elemento h4.

Siguiendo la carne y las papas, agregamos algunos controles para que esta cosa se desplace.

¡Y eso es todo por el marcado!

El

También estamos operando con bastante ligereza en el lado