Cómo crear swipers como los de Netflix en Vue

Si ha estado creando para la web durante un tiempo, al igual que yo, se habrá encontrado con al menos algunos problemas al crear deslizadores: por alguna razón, siempre parecen tener mente propia por un tiempo y luego vuelven. O bien, el deslizador no responde tan bien como le hubiera gustado o el extenso estilo que tuvo que hacer antes de que se viera la mitad de bien de lo que esperaba.

Ahora bien, si alguna vez has utilizado Netflix, también habrás visto lo elegantes y fluidos que son sus swipers de películas. Gracias a Vue y a la biblioteca vue-awesome-swiper, puedes crear tus propios swipers.

En este tutorial crearás un swiper en Vue.

• Un entorno de desarrollo local para Node.js. Siga Cómo instalar Node.js y crear un entorno de desarrollo local

Paso 1 – Creación de su proyecto

Vue es un framework frontend progresivo que nos ayuda a crear interfaces interactivas y maravillosas. Puedes obtener más información sobre Vue aquí

Para instalar Vue en su máquina, debe ejecutar el siguiente comando:

npm install -g vue-cli

Esto instala Vue de forma global en su equipo. Para confirmar la instalación de Vue, ejecute el siguiente comando en su terminal:

vue --version

Si obtiene un número de versión como resultado, entonces ha instalado Vue en su máquina.

Ahora que hemos instalado Vue en nuestras máquinas, estamos listos para comenzar a compilar. Para crear la aplicación, use la CLI de Vue para comenzar. Ejecute lo siguiente en su terminal:

vue init webpack netflix-like-swipers

Esto nos muestra un mensaje para que lo completemos y una vez que terminamos con las indicaciones, crea un proyecto de muestra de Vue con webpack para que podamos modificar y construir nuestra aplicación.

Paso 2: Creación del componente de película

El propósito de los componentes es hacer que las partes de nuestra interfaz de usuario sean reutilizables. En este caso, vamos a tener muchas películas, por lo que crearemos un componente de película y luego reutilizaremos el componente como queramos durante la aplicación.

Para crear el componente de película, cree un Movies.vuearchivo en el src/components/directorio

nano src/components/Movie.vue

En nuestro Movie.vue, construimos nuestro componente de la siguiente manera:

Película.vue

    script    export default {      name: 'Movie',      props : [        'image',        'title',        'description',        'duration'      ],    }    /script

Aquí nombramos nuestro componente y también especificamos el propsnombre del componente que se agregará cada vez que se use el componente.

Agregue el siguiente código para definir la plantilla para el componente:

Película.vue

    template        div v-bind:style="{ backgroundImage: 'url(' + image + ')' }"        div          h1{{ title }}/h1          p{{ description }}/p          p{{ duration }}/p        /div      /div    /template

A continuación, agregue el estilo con alcance para el componente para controlar cómo se muestra la película:

Película.vue

    style scoped    h1, h2 {      font-weight: normal;    }    .movie{      display: flex;      flex-direction: column;      align-items: flex-start;      justify-content: flex-end;      text-align: left;      padding: 10px;      width : 350px;      height : 500px;      background-color: rgba(255,255,255,0.7);      background-repeat: no-repeat;      background-blend-mode: overlay;      background-size: cover;    }    /style

Ahora que ha creado su componente de película, puede integrar los deslizadores en la aplicación.

Paso 3: Creación del componente de página de inicio con Vue-Awesome-Swiper

Instale el módulo con el siguiente comando:

npm install vue-awesome-swiper --save

Ahora crea un HomePage.vuecomponente en el src/componentsdirectorio en el que usaremos el swiper.

touch src/components/HomePage.vue

En HomePage.vue, cree el componente e importe los componentes Movie, swiper, swiperSlide. And configure the slider using the propiedades de datos para el componente:

Página de inicio.vue

    script    import Movie from './Movie'    import 'swiper/dist/css/swiper.css'    import { swiper, swiperSlide } from 'vue-awesome-swiper'        export default {      name: 'HomePage',      components: {        Movie,        swiper,        swiperSlide      },      data() {        return {          swiperOption: {            direction : 'vertical',            pagination: {              el: '.swiper-pagination',              type: 'bullets'            },          }        }      }    }    /script

En este caso, especificamos que queríamos que nuestros deslizadores verticaly el estilo de paginación fueranbullets

La plantilla carga los Moviecomponentes individuales y establece el contenido:

https://via.placeholder.com/728×90.png?text=Visit+WhoIsHostingThis.com+Guía+de+Compradores

Atención al cliente: https://placeholder.com/

Página de inicio.vue

    template        swiper :options="swiperOption"          !-- slides --          swiper-slide            Movie image="https://via.placeholder.com/300x450.png?text=Movie1" description="Movie 1 description" duration="2hrs"/          /swiper-slide          swiper-slide            Movie image="https://via.placeholder.com/300x450.png?text=Movie1" description="Movie 2 description" duration="2hrs"/          /swiper-slide          !-- more movies --           swiper-slide            Movie image="https://via.placeholder.com/300x450.png?text=Movie1" description="Movie 5 description" duration="2hrs"/          /swiper-slide                    !-- Optional controls --          div  slot="pagination"/div        /swiper    /template

Usamos el swiper /componente y tenemos muchos swiper-slide/componentes dentro de él. También agregamos un divpara contener el elemento de paginación.

Agregue el siguiente CSS al archivo para darle estilo al deslizador:

Página de inicio.vue

    !-- Add "scoped" attribute to limit CSS to this component only --    style scoped    .swiper-slide{      display: flex;      justify-content: center;      flex-direction: column;    }    .swiper-container {      height : 500px;    }    /style

Guarde el archivo. Ahora puede renderizar el componente.

Paso 4 – Representación de nuestros componentes

Para renderizar los componentes, inclúyalos y utilícelos en el src/App.vuearchivo.

Abra el archivo en su editor:

nano src/App.vue

Primero, importe el HomePagecomponente e inicialice el swiper:

Aplicación.vue

    script    import HomePage from './components/HomePage'    export default {      name: 'App',      components: {        HomePage      },      data() {        return {          swiperType : 'Easy Vertical Swiper'        }      }    }    /script

Luego agrega la plantilla:

Aplicación.vue

    template      div        h1{{ swiperType }}/h1        HomePage/      /div    /template

Por último, añade el estilo:

Aplicación.vue

    style    #app {      font-family: 'Avenir', Helvetica, Arial, sans-serif;      -webkit-font-smoothing: antialiased;      -moz-osx-font-smoothing: grayscale;      text-align: center;      color: #2c3e50;      margin-top: 60px;      display: flex;      align-items: center;      flex-direction: column;    }    /style

Asegúrese de que todos los archivos estén guardados e inicie el servidor de desarrollo con el siguiente comando:

    npm run dev

Esto inicia un servidor de desarrollo. Visite http://localhost:8080para ver su aplicación.

Paso 5 – Explorar otros tipos de deslizadores

Ahora que hemos visto cómo funcionan los deslizadores simples, exploremos más opciones. Echaremos un vistazo a los efectos de deslizador de CoverFlow 3D horizontal y los deslizadores anidados. Para ver más ejemplos de deslizadores, puedes revisar los ejemplos en la página del proyecto vue-awesome-swiper.

Para crear un deslizador de efectos CoverFlow Swiper 3D, modifique las opciones del control deslizante HomePage.vuepara que se vean así:

    // HomePage.vue    script    [..]    export default {      name: 'HomePage',      [...]      data() {        return {          swiperOption: {              effect: 'coverflow',              grabCursor: true,              centeredSlides: true,              slidesPerView: '5',              coverflowEffect: {                rotate: 50,                stretch: 0,                depth: 100,                modifier: 1,                slideShadows : false              },              pagination: {                el: '.swiper-pagination'              }            }        }      }    }    /script

Ahora te estarás preguntando, "¿qué pasa si quiero tener deslizadores en mis deslizadores?". Para hacer esto, haz los HomePage.vuesiguientes ajustes:

    // HomePage.vue    script    [...]    export default {      [...]      data() {        return {          swiperOptionh: {            spaceBetween: 50,            pagination: {              el: '.swiper-pagination-h',              clickable: true            }          },          swiperOptionv: {            direction: 'vertical',            spaceBetween: 50,            pagination: {              el: '.swiper-pagination-v',              clickable: true            }          }        }      }    }    /script

Especificamos las configuraciones para los diferentes swipers y luego en nuestra Plantilla, tenemos una estructura como esta:

    template        swiper :options="swiperOptionh"            swiper-slide              [...]            /swiper-slide            [...]            swiper-slide              swiper :options="swiperOptionv"                swiper-slide                  [...]                /swiper-slide                 [...]                div slot="pagination"/div              /swiper            /swiper-slide            [...]            div slot="pagination"/div        /swiper    /template

Observe cómo usamos :options=``"``swiperOptionh``"para especificar las configuraciones para horizontal swipery :options=``"``swiperOptionv``"paravertical swiper

Ahora que hemos visto algunos ejemplos básicos de swipers, estamos bien encaminados para desarrollar swipers como los de Netflix.

Edite su HomePage.vuearchivo para que se vea así:

    // HomePage.vue    script    [...]    export default {      [...]      data() {        return {          swiperOptions : {            slidesPerView: 5,            spaceBetween: 0,            freeMode: true,            loop: true,            navigation: {              nextEl: '.swiper-button-next',              prevEl: '.swiper-button-prev'            }          }        }      }    }    /script

Cambiamos las opciones del deslizador seleccionando la cantidad de moviesque queremos en cada vista. También las configuramos spaceBetweenen 0. Para dar también la sensación de deslizamiento "sin fin", las configuramos loopen verdadero. También especificamos los nombres de clase de nuestros botones de navegación: esto agrega funcionalidad a los botones.

Modifique la plantilla para que tenga la siguiente estructura:

    !-- HomePage.vue --     template        swiper :options="swiperOptions"            swiper-slide              Movie image="http://res.cloudinary.com/og-tech/image/upload/s--4NgMf3RF--/v1521804358/avengers.jpg" description="Thanos is around" duration="2hrs"/            /swiper-slide            [...]            swiper-slide              Movie image="http://res.cloudinary.com/og-tech/image/upload/s--qXaW5V3E--/v1521804426/wakanda.jpg" description="Wakanda Forever" duration="2hrs15mins"/            /swiper-slide            div slot="button-prev"/div            div slot="button-next"/div        /swiper    /template

Visita tu servidor para ver los resultados.

Conclusión

En este artículo, implementó swipers en una aplicación Vue. Ahora puede implementarlos en sus propias aplicaciones con facilidad.