VueでNetflixのようなスワイパーを作成する方法
あなたがしばらくの間ウェブのために構築しているなら、あなたは私がスワイパーを作るときに少なくともいくつかの問題に遭遇したことを望みます-何らかの理由で、彼らはいつもしばらくの間彼ら自身の心を持っているようで、彼らはやって来ます。 それは、スワイパーが思ったほど反応が良くないか、期待した半分の見栄えにする前に行わなければならなかった広範なスタイリングのいずれかです。
Netflixを使用したことがある場合は、映画のスワイパーがいかにエレガントで流動的であるかも見てきました。 Vueとvue-awesome-swiperライブラリのおかげで、独自のスワイパーを作成できます。
このチュートリアルでは、Vueでスワイパーを作成します。
- Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください
ステップ1-プロジェクトの作成
Vueは、インタラクティブで素晴らしいインターフェースを構築するのに役立つプログレッシブフロントエンドフレームワークです。 Vue の詳細については、こちらをご覧ください。
マシンにVueをインストールするには、次のコマンドを実行する必要があります。
- npm install -g vue-cli
これにより、Vueがマシンにグローバルにインストールされます。 Vueのインストールを確認するには、ターミナルで次のコマンドを実行します。
- vue --version
結果としてバージョン番号を取得した場合は、マシンにVueがインストールされています。
マシンにVueをインストールしたので、ビルドを開始する準備が整いました。 アプリケーションを作成するには、VueCLIを使用して開始します。 ターミナルで次を実行します。
- vue init webpack netflix-like-swipers
これは、完了するためのプロンプトを示しています。プロンプトが完了すると、アプリケーションを微調整してビルドするためのWebpackを使用してVueサンプルプロジェクトが作成されます。
ステップ2–ムービーコンポーネントの作成
コンポーネントの目的は、UIの一部を再利用可能にすることです。 この場合、多くの映画を作成するので、映画コンポーネントを作成してから、アプリケーション中に必要に応じてコンポーネントを再利用します。
ムービーコンポーネントを作成するには、src/components/
ディレクトリにMovies.vue
ファイルを作成します
- nano src/components/Movie.vue
Movie.vue
では、次のようにコンポーネントを構築します。
<script>
export default {
name: 'Movie',
props : [
'image',
'title',
'description',
'duration'
],
}
</script>
ここでは、コンポーネントに名前を付け、コンポーネントが使用されるたびに追加されるコンポーネントのprops
も指定します。
次のコードを追加して、コンポーネントのテンプレートを定義します。
<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>
次に、コンポーネントのスコープ付きスタイルを追加して、ムービーの表示方法を制御します。
<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を使用してホームページコンポーネントを作成する
次のコマンドでモジュールをインストールします。
- npm install vue-awesome-swiper --save
次に、スワイパーを使用するsrc/components
ディレクトリにHomePage.vue
コンポーネントを作成します。
- touch src/components/HomePage.vue
HomePage.vue
で、コンポーネントを作成し、コンポーネントのMovie
、swiper
、swiperSlide. And configure the slider using the
data`プロパティをインポートします。
<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/
<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をファイルに追加して、スワイパーのスタイルを設定します。
<!-- 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
ファイルで使用します。
エディターでファイルを開きます。
- nano src/App.vue
まず、HomePage
コンポーネントをインポートし、スワイパーを初期化します。
<script>
import HomePage from './components/HomePage'
export default {
name: 'App',
components: {
HomePage
},
data() {
return {
swiperType : 'Easy Vertical Swiper'
}
}
}
</script>
次に、テンプレートを追加します。
<template>
<div id="app">
<h1>{{ swiperType }}</h1>
<HomePage/>
</div>
</template>
最後に、スタイリングを追加します。
<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 swiper
のhorizontal 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アプリケーションにスワイパーを実装しました。 これで、それらを独自のアプリケーションに簡単に実装できます。