あなたがしばらくの間ウェブのために構築しているなら、あなたは私がスワイパーを作るときに少なくともいくつかの問題に遭遇したことを望みます-何らかの理由で、彼らはいつもしばらくの間彼ら自身の心を持っているようで、彼らはやって来ます。 それは、スワイパーが思ったほど反応が良くないか、期待した半分の見栄えにする前に行わなければならなかった広範なスタイリングのいずれかです。

Netflixを使用したことがある場合は、映画のスワイパーがいかにエレガントで流動的であるかも見てきました。 Vuevue-awesome-swiperライブラリのおかげで、独自のスワイパーを作成できます。

このチュートリアルでは、Vueでスワイパーを作成します。

ステップ1-プロジェクトの作成

Vueは、インタラクティブで素晴らしいインターフェースを構築するのに役立つプログレッシブフロントエンドフレームワークです。 Vue の詳細については、こちらをご覧ください。

マシンにVueをインストールするには、次のコマンドを実行する必要があります。

  1. npm install -g vue-cli

これにより、Vueがマシンにグローバルにインストールされます。 Vueのインストールを確認するには、ターミナルで次のコマンドを実行します。

  1. vue --version

結果としてバージョン番号を取得した場合は、マシンにVueがインストールされています。

マシンにVueをインストールしたので、ビルドを開始する準備が整いました。 アプリケーションを作成するには、VueCLIを使用して開始します。 ターミナルで次を実行します。

  1. vue init webpack netflix-like-swipers

これは、完了するためのプロンプトを示しています。プロンプトが完了すると、アプリケーションを微調整してビルドするためのWebpackを使用してVueサンプルプロジェクトが作成されます。

Vue.js prompts

ステップ2–ムービーコンポーネントの作成

コンポーネントの目的は、UIの一部を再利用可能にすることです。 この場合、多くの映画を作成するので、映画コンポーネントを作成してから、アプリケーション中に必要に応じてコンポーネントを再利用します。

ムービーコンポーネントを作成するには、src/components/ディレクトリにMovies.vueファイルを作成します

  1. nano src/components/Movie.vue

Movie.vueでは、次のようにコンポーネントを構築します。

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

ここでは、コンポーネントに名前を付け、コンポーネントが使用されるたびに追加されるコンポーネントのpropsも指定します。

次のコードを追加して、コンポーネントのテンプレートを定義します。

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>

次に、コンポーネントのスコープ付きスタイルを追加して、ムービーの表示方法を制御します。

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>

ムービーコンポーネントを作成したので、スワイパーをアプリケーションに統合します。

ステップ3–Vue-Awesome-Swiperを使用してホームページコンポーネントを作成する

次のコマンドでモジュールをインストールします。

  1. npm install vue-awesome-swiper --save

次に、スワイパーを使用するsrc/componentsディレクトリにHomePage.vueコンポーネントを作成します。

  1. touch src/components/HomePage.vue

HomePage.vueで、コンポーネントを作成し、コンポーネントのMovieswiperswiperSlide. And configure the slider using the data`プロパティをインポートします。

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>

この場合、スワイパーverticalが必要であり、ページネーションスタイルはbulletsである必要があることを指定しました。

テンプレートは、個々のMovieコンポーネントをロードし、コンテンツを設定します。

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

C / O https://placeholder.com/

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

<swiper />コンポーネントを使用し、その中に多くの<swiper-slide/>コンポーネントがあります。 また、ページネーション要素を保持するためにdivを追加しました。

次のCSSをファイルに追加して、スワイパーのスタイルを設定します。

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>

ファイルを保存します。 これで、コンポーネントをレンダリングできます。

ステップ4–コンポーネントのレンダリング

コンポーネントをレンダリングするには、それらをインクルードし、src/App.vueファイルで使用します。

エディターでファイルを開きます。

  1. nano src/App.vue

まず、HomePageコンポーネントをインポートし、スワイパーを初期化します。

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

次に、テンプレートを追加します。

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

最後に、スタイリングを追加します。

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

すべてのファイルが保存されていることを確認し、次のコマンドで開発サーバーを起動します。

    npm run dev

これにより、開発サーバーが起動します。 http://localhost:8080にアクセスして、アプリを表示します。

ステップ5–他のタイプのスワイパーを探索する

単純なスワイパーがどのように機能するかを見てきたので、さらに多くのオプションを調べてみましょう。 水平方向の3DCoverFlowスワイパーエフェクトとネストされたスワイパーを見ていきます。 その他のスワイパーの例については、vue-awesome-swiperプロジェクトページ例を確認できます。

3D CoverFlow Swiper Effectsスワイパーを作成するには、HomePage.vueのスライダーオプションを次のように調整します。

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

今、あなたは自分自身に「もし私が自分のスワイパーにスワイパーを入れたいと思ったらどうなるか」と自問しているかもしれません。 これを行うには、HomePage.vueを次のように微調整します。

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

さまざまなスワイパーの構成を指定すると、テンプレートで次のような構造になります。

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

:options=``"``swiperOptionh``"を使用して、vertical swiperhorizontal swiperおよび:options=``"``swiperOptionv``"の構成を指定する方法に注目してください。

基本的なスワイパーの例をいくつか見てきたので、スワイパーのようなNetflixの構築に向けて順調に進んでいます。

HomePage.vueファイルを次のように編集します:

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

各ビューで必要なmoviesの数を選択して、スワイパーのオプションを変更しました。 また、spaceBetweenを0に設定します。 また、「無限の」スワイプ感を与えるために、loopをtrueに設定します。 ナビゲーションボタンのクラス名も指定しました-これにより、ボタンに機能が追加されます

次の構造になるようにテンプレートを変更します。

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

サーバーにアクセスして結果を確認してください。

結論

この記事では、Vueアプリケーションにスワイパーを実装しました。 これで、それらを独自のアプリケーションに簡単に実装できます。