How To Make Netflix-Like Swipers in Vue

Celý článek

If you have been building for the web for a little while, you would have like me encountered at least some issues when making swipers - for some reason, they always seem to have a mind of their own for a while and they come around. It's either, the swiper isn’t as responsive as you would have liked or the extensive styling you had to do before making it look half as good as you expected.

Now if you have ever used Netflix, you have also seen how elegant and fluid their movie swipers are. Thanks to Vue and this awesome swiper you don’t have to feel some type of way when making your swipers. By the time you finish reading this article, you would be well equipped to making your own Netflix-like Swipers using Vue.

What We Will Build

The demo below shows the example we will use the swiper to build:

You can also play with the live version here

Getting Started

Before getting started, you would need the following :

• Node installed on your machine
• Node Package Manager ( NPM ) installed on your machine

To confirm your installation, run the following command in your terminal :

    node --version
    npm --version

If you get their version numbers as results then you’re good to go.

Tools We’ll Use

To help us solve this “Swiper Problem”, we are going to make use of some other tools. Let's take a look at them now,

Installing VueJS If you have never used Vue before, don’t fear. Vue is a progressive frontend framework that helps us build interactive and wonderful interfaces. You can learn more about Vue here

To install Vue on your machine, you need to run the following command :

    npm install -g vue-cli

This installs Vue globally on your machine. To confirm your Vue installation, run the following command in your terminal :

    vue --version

If you get a version number as the result then you’ve installed Vue on your machine.

Creating your Project

Now that we have installed Vue on our machines, we are ready to start building. To create our application, we use the Vue CLI to get us started. We need to run the following in our terminal :

    vue init webpack netflix-like-swipers

This shows a prompt for us to complete and once we’re done w the prompts, it creates a Vue sample project with webpack for us to tweak and build our application.

Movie Component

The purpose of components is to make parts of our UI reusable. In this case, we are going to have so many movies so why not create a movie component and then reuse the component as we wish during the application.

Our Movie Component is will look like this :

To make the movie component, we create a Movies.vue file in our src/components/ directory

    cd src/components/
    touch Movie.vue

In our Movie.vue , we build our component as follows :

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

Here, we name our component and also specify the props for the component which will be added each time the component is used.

The component has the following template

    // Movie.vue
    <template>
        <div class="movie" v-bind:style="{ backgroundImage: 'url(' + image + ')' }">
        <div class="content">
          <h1 class="title">{{ title }}</h1>
          <p class="description">{{ description }}</p>
          <p class="duration">{{ duration }}</p>
        </div>
      </div>
    </template>

And has some scoped styling that looks like this :

    <!-- Movie.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>

HomePage Component - Using the Vue Awesome Swiper

Now that we have successfully created our movie component, the next thing we want to do is to integrate the swipers into our application.

Installing the Vue Awesome Swiper Module We need to first install the module and to do this, we run the following command :

    npm install vue-awesome-swiper --save

Once we do this, we have successfully installed the module for use in our application.

Using the Installed Swiper Module

Now, we create a HomePage.vue component in the src/components directory in which we will use the swiper.

    cd src/components
    touch HomePage.vue

Now in our HomePage.vue , we first create the component and also import the other components Movie, swiper, swiperSlide - these are gotten after importing them from the swiper module we installed in the project.

We also configure the slider using the data properties for the component.

    // HomePage.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>

In this case, we specified we wanted our swipers vertical and the pagination style should be bullets

Now, our HomePage.vue template will look like this :

    <!-- HomePage.vue -->
    <template>
        <swiper :options="swiperOption">
          <!-- slides -->
          <swiper-slide>
            <Movie image="http://res.cloudinary.com/og-tech/image/upload/s--4NgMf3RF--/v1521804358/avengers.jpg" title="Avengers : Infinity War" description="Thanos is around" duration="2hrs"/>
          </swiper-slide>
          <swiper-slide>
            <Movie image="http://res.cloudinary.com/og-tech/image/upload/s--BmgguRnX--/v1521804402/thor.jpg" title="Thor : Ragnarok" description="Thor lost his hair" duration="2hrs30mins"/>
          </swiper-slide>
          <!-- more movies --> 
          <swiper-slide>
            <Movie image="http://res.cloudinary.com/og-tech/image/upload/s--qXaW5V3E--/v1521804426/wakanda.jpg" title="Black Panther" description="Wakanda Forever" duration="2hrs15mins"/>
          </swiper-slide>

          <!-- Optional controls -->
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </template>

Pro Tip : When building applications, Cloudinary is your friend! Notice how we made use of Cloudinary when serving our images. With Cloudinary, you can transform your images on the fly without having to do any extra work and all you have to do is to edit the image URL like below do things like this :

http://res.cloudinary.com/og-tech/image/upload/s--nGy7I6oU--/c_scale,w_150/v1521804358/avengers.jpg

There’s so much you can do with Cloudinary and you can check them out here.

We use our <swiper /> component and have many <swiper-slide/>``'``s inside it. We also added a div to house the pagination element.

The HomePage component has the following style :

    <!-- HomePage.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>

Rendering Our Components

Now to render our components, we need to include them and use them in the src/App.vue as follows :

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

Our src/App.vue has the following template

    <!-- App.vue -->
    <template>
      <div id="app">
        <h1>{{ swiperType }}</h1>
        <HomePage/>
      </div>
    </template>

and some styling

    <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>

Testing Swipers

To see how things are going with our application, we run the following command from our terminal:

    npm run dev

When we do this, a development server is started and our app can be previewed usually on localhost:8080

More Swipers

Now that we’ve seen how the simple swipers work, let’s explore more options. We’ll take a look at Horizontal 3D CoverFlow Swiper Effects and Nested Swipers. For more swiper examples, you can head over here

3D CoverFlow Swiper Effects To achieve this, we need to tweak the slider options in our HomePage.vue to look like this :

    // 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>

These can be tweaked at any time to suit your specific needs using the data properties for the swiperOption

Nested Swipers Now you may be asking yourself, “what if I wanted to have swipers in my swipers”. With vue-awesome-swiper you don’t need to do the most anymore, all you need to do is to tweak your HomePage.vue as follows :

    // 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>

We specify the configurations for the different swipers and then in our Template, we have a structure like this :

    <template>
        <swiper :options="swiperOptionh">
            <swiper-slide>
              [...]
            </swiper-slide>
            [...]
            <swiper-slide>
              <swiper :options="swiperOptionv">
                <swiper-slide>
                  [...]
                </swiper-slide>
                 [...]
                <div class="swiper-pagination swiper-pagination-v" slot="pagination"></div>
              </swiper>
            </swiper-slide>
            [...]
            <div class="swiper-pagination swiper-pagination-h" slot="pagination"></div>
        </swiper>
    </template>

Notice how we use :options=``"``swiperOptionh``" to specify the configurations for the horizontal swiper and :options=``"``swiperOptionv``" for the vertical swiper

Making Netflix-Like Swipers

Now that we have seen some basic swiper examples, we’re well underway to building Netflix like swipers.

We will continue using the Vue Awesome Swiper we have been playing around with so you don’t need to worry about any extra knowledge/setup. We have our movie component and we’ll apply the Vue Swipers on the component to give the Netflix-like swipe result.

We need to edit our HomePage.vue to look like this :

    // 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>

We changed the options for our swiper by selecting the number of movies we want in each view, we also set the spaceBetween them to 0. To also give the ‘endless’ swipe feel, we set loop to true. We also specified the class names of our navigation buttons - this adds functionality to the buttons

Now, our template has the following structure :

    <!-- HomePage.vue --> 
    <template>
        <swiper :options="swiperOptions">
            <swiper-slide>
              <Movie image="http://res.cloudinary.com/og-tech/image/upload/s--4NgMf3RF--/v1521804358/avengers.jpg" title="Avengers : Infinity War" 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" title="Black Panther" description="Wakanda Forever" duration="2hrs15mins"/>
            </swiper-slide>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
    </template>

When we go back to our development server, our app looks like this!

Conclusion

In this article, we saw how implement swipers extensively in our Vue applications. There are so many applications for swipers and now you no longer have to dread implementing them anymore since you have the keys now.

Here’s a link to the Github repository. Feel free to leave a comment below if you have any further questions.