How To Make Netflix-Like Swipers in Vue

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 the vue-awesome-swiper library, you can create your own swipers.

In this tutorial you’ll create a swiper in Vue.

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment

Step 1 – Creating Your Project

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.

Now that we have installed Vue on our machines, we are ready to start building. To create the application, use the Vue CLI to get us started. Run the following in your 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.

Step 2 – Creating the Movie Component

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

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

nano src/components/Movie.vue

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

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

Add the following code to define the template for the component:

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

Then add the scoped styling for the component to control how the movie is displayed:

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

Now that you have created your movie component, you’lkl integrate the swipers into the application.

Step 3 – Creating the HomePage Component with Vue-Awesome-Swiper

Install the module with the following command:

npm install vue-awesome-swiper --save

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

touch src/components/HomePage.vue

In HomePage.vue , create the component and import the components Movie, swiper, swiperSlide. And configure the slider using the data` properties for the component:

    <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

The template loads the individual Movie components and sets the content:

https://via.placeholder.com/728x90.png?text=Visit+WhoIsHostingThis.com+Buyers+Guide

C/O https://placeholder.com/

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

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

We use the <swiper /> component and have many <swiper-slide/> components inside it. We also added a div to hold the pagination element.

Add the following CSS to the file to style the swiper:

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

Save the file. Now you can render the component.

Step 4 – Rendering Our Components

To render the components, include them and use them in the src/App.vue file.

Open the file in your editor:

nano src/App.vue

First, import the HomePage component and initialize the swiper:

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

Then add the template:

    <template>
      <div id="app">
        <h1>{{ swiperType }}</h1>
        <HomePage/>
      </div>
    </template>

Finally, add the 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>

Ensure all of the files are saved and start the development server with the following command:

    npm run dev

This starts a development server is started. Visit http://localhost:8080 to view your app.

Step 5 – Exploring Other Types of 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 review the examples on the vue-awesome-swiper project page.

To create a 3D CoverFlow Swiper Effects swiper, tweak the slider options in 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>

Now you may be asking yourself, “what if I wanted to have swipers in my swipers”. To do this, 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

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

Edit your HomePage.vue file 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 the 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

Modify the template so it 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>

Visit your server to see the results.

Conclusion

In this article, You implemented swipers in a Vue application. You can now implement them in your own applications with ease.