[Vue.js]Vuetifyを使ってスライダーとカルーセルを実装する方法[v-slide, v-carousel]

Vue.jsの事を考える女性

今回はタイトルの通り、Vue.jsベースの高機能UIフレームワークである Vuetify のUIコンポーネントを使ってみた使用感などを、書いていきたいと思います。
今回ご紹介するのは、通常のスライダー用コンポーネントと、カルーセル型コンポーネントの2つについてです。

↑スライダーは、こんな感じのものが実装できます。

↑カルーセルは、こんな感じのものが実装できます。

Vuetifyの導入方法について

導入方法は、公式のこのページ
Vuetifyをはじめましょう–Vuetify

にもある通り、CLI経由で使う方法と、CDN経由で使う方法があります。
本腰を入れてWebアプリケーション等の制作を行うならおすすめはCLI経由でのインストールですが、
お手軽にまずは試してみたい、という場合はCDN経由で試してみる事もできます。

CLI経由の場合

CLI経由でのインストール方法については、以下の記事に記載しましたので、そちらも合わせてご覧ください。
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法

CDNの場合(おすすめは上記のCLIによる導入です)

CDN経由の場合は下記です。
<head></head> 内に以下の3つを読み込みます(googleフォントとmaterialdesignアイコンはなくても動きます)。

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

bodyの閉じタグ( </body> )の直前に以下を読み込みます。

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

そして、これまたbodyの閉じタグ( </body> )の直前に (これは慣例的なサンプルなので、ケースによっては、他の場所に書いても当然動きます)、
Vue.jsとひもづけるための指定を以下のように書きます。

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
  })
</script>

上記の、el: で指定した要素がVue.jsと紐づいて動く部分になります。
html側には、このように同名のIDをつけておきます。

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <p>Wow! Good UI Framework 'Vuetify'!</p>
      </v-container>
    </v-main>
  </v-app>
</div>

CDN経由の場合は以上で準備完了です。

スライダーを表示してみる

以下のように<v-slide-group>, <v-slide-item>を使用すると、
スライダーが表示可能です。
※v-img の *******.png となっている部分は適宜、画像のパスを指定してください。また、サンプルコードのためstyleは直書きです。
classを指定する事ももちろん可能です。

<template>
  <v-sheet>
    <v-slide-group multiple show-arrows>
      <v-slide-item v-for="n in 8" :key="n">
        <v-card style="margin: 0 20px 0 0; width: 320px; height: 240px;">
          <v-img class="white--text align-end" height="120px" src="********.png">
          <v-card-title>sample title {{ n }}</v-card-title>
          <v-card-text class="text--primary">
           {{ n }}番目のカードテキスト
          </v-card-text>
        </v-card>
      <v-slide-item>
    </v-slide-group>
  </v-sheet>
</template>

v-slide-group,v-sliide-item のサンプル
↑こんな感じのスライダーが実装できます。v-cardと組み合わせる事で、カード型デザインとの相性も良さそうですね。

v-slide-group, v-slide-item のサンプル

v-slide-group, v-slide-item のサンプル
上記のリンクに、サンプルを用意しました。v-card を使ったカード型UIが並ぶスライダー型のコンテンツです。ご覧ください。

スライダーのVuetify公式ページは以下になります。
スライドグループ・コンポーネント — Vuetify

カルーセル型スライダーを表示してみる

Vuetifyのコンポーネントは、本当に多種多様なものが用意されていまして、中にはカルーセル型のスライダーを実装できるものもあります。
どうするかというと、 <v-carousel> を使用すれば、実装が可能です。

<template>
  <v-carousel>
    <v-carousel-item
      v-for="(item,i) in items"
      :key="i"
      reverse-transition="fade-transition"
      transition="fade-transition"
    >
     <v-img v-bind:src="item.src" v-bind:lazy-src="item.src" class="grey lighten-2">
       <template v-slot:placeholder>
         <v-row
           class="fill-height ma-0"
           align="center"
           justify="center"
         >
          <v-progress-circular
            indeterminate
            color="blue-grey"
          ></v-progress-circular>
         </v-row>
       </template>
     </v-img>
   </v-carousel-item>
 </v-carousel>
</template>

↑上記のように <v-carousel> を使用すると、このようなカルーセル型スライダーが実装できます。
v-carousel のサンプル

v-carousel, v-carousel-item のサンプル

先ほどの v-slide-item のサンプルの下に、v-carousel の実際に動くサンプルをご用意しました。
v-carousel, v-carousel-item のサンプル
どのような表示ができるか、ぜひご覧ください。

各スライドの画像の元ソースはどこで定義しているかというと、vue.js における data() の部分です。

export default {
    data () {
      return {
        items: [
          {
            src: 'sample01.jpg',
          },
          {
            src: 'sample02.jpg',
          },
          {
            src: 'sample03.jpg',
          },
        ],
      }
    },
  }

上記のように記述して、items という名前の data を配列として定義しておきます。
この配列のキー src の値として各画像のパスを格納しておき、
それを9行目の v-img に v-bind して値を渡しています。
この辺りの、v-bind等に関してはvue.js公式に、詳しい解説がありますので一読をおすすめします。

こちらも上記のリンクに、サンプルを用意しましたのでご覧ください。

カルーセル型スライダーのVuetify公式ページは以下になります。
カルーセル・コンポーネント — Vuetify

この記事のまとめ

今回は、Vuetifyの豊富なUIコンポーネントの中から、<v-slide-group>, <v-slide-item><v-carousel> を使用して通常のスライダー、カルーセル型スライダーを実装する方法についてご紹介しました。
以前も書きましたが、Vue.js と Vuetify は、とてもおすすめの組み合わせです。

当サイトでは今後も Vue.js、 Vuetify についての記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。