[Vuetify3]Vue.js3に対応したカルーセル(スライドショー)を使う方法[v-carousel]

2022年11月1日に満を持してリリースされたVuetify 3 (コードネーム：Titan)。
この記事を書いている現在(2022年12月4日)、早くも version 3.0.3 に更新されている様です。

今回は、その Vuetify 3 の優れた数々のコンポーネントの中から、
カルーセル型のスライドショーを作成する事ができる
v-carousel の使用方法について、記事を書いていきます。

カルーセル型のスライドショーというのは、
Swiper等でも表示する事ができる、画像などのコンテンツをスライド表示させる事ができるUIパーツの事ですね。

強調して見せたいコンテンツをサムネイル付きで、意図的に限定したスペース内で見せる事ができます。
リンクと併用する事で、WebサイトやWebアプリに回遊性をもたらすことも可能なUIパーツです。

↑こんな感じのカルーセル型のスライドショーを作成できます。

それでは次のセクションから、そんなカルーセル型のスライドショーを表示できる v-carousel の使用方法について、書いていきたいと思います。
なお、この記事を書いた際に Vue3, Vuetify3 を動作させている環境は次のとおりです。
参考までにご確認ください。
・Mac OS Montrey (12.3.1)
・Node.js v16.18.1
↑この Node.js のバージョンは、 Corepack が同梱されているバージョン( v16.10以降 )を使用することをお勧めします。

v-carousel の使用方法

では早速、v-carousel の使用方法です。
基本の形は次のように書きます。

<div class="my-16">
<v-carousel>
  <v-carousel-item
    src="https://picsum.photos/1200/?random=1"
    cover
  ></v-carousel-item>

  <v-carousel-item
    src="https://picsum.photos/1200/?random=2"
    cover
  ></v-carousel-item>

  <v-carousel-item
    src="https://picsum.photos/1200/?random=3"
    cover
  ></v-carousel-item>
</v-carousel>
</div>

↑上記は、3枚のスライドコンテンツをもつカルーセル型スライドショーを表示している例です。
このように、
v-carousel の中に子要素として
v-carousel-item を配置するのが基本形になります。

デフォルトでは、
スライド枚数を下部にドットで表示
スライドの左右にナビゲーションを表示

という状態になっています。
もし、何らかの理由でスライド枚数のドットを外したい場合は、次のように書きます。

<div class="my-16">
<v-carousel hide-delimiters>
  <v-carousel-item
    src="https://picsum.photos/1200/?random=1"
    cover
  ></v-carousel-item>

  <v-carousel-item
    src="https://picsum.photos/1200/?random=2"
    cover
  ></v-carousel-item>

  <v-carousel-item
    src="https://picsum.photos/1200/?random=3"
    cover
  ></v-carousel-item>
</v-carousel>
</div>

↑v-carousel に対して、 hide-delimiters という prop を指定してあげるだけです。

また、左右のスライド操作の矢印を制御したい場合。たとえば、hover時にのみ表示させるようにするには次のように書きます。

<div class="my-16">
<v-carousel show-arrows="hover">
  <v-carousel-item
    src="https://picsum.photos/1200/?random=1"
    cover
  ></v-carousel-item>

  <v-carousel-item
    src="https://picsum.photos/1200/?random=2"
    cover
  ></v-carousel-item>

  <v-carousel-item
    src="https://picsum.photos/1200/?random=3"
    cover
  ></v-carousel-item>
</v-carousel>
</div>

↑v-carousel に対して、show-arrows という prop を使い、
hover時にのみ左右のスライド操作の矢印を表示するように指定しています。

この show-arrows という prop には真偽値(真理値)を渡すこともできるので、
単純に左右のスライド操作の矢印を表示させたくない場合は、
:show-arrows="false" とすれば出来ます。(true状態がデフォルトです。)
その場合は、 :show-arrows=”false” のように : を付けて値を v-bind します。

dataの値による制御

v-carousel のスライドの進捗状況、つまり
「現在何枚目のスライドか」と言う部分は、v-modelとdataの値を紐づけることで制御できます。

どういうことかと言うと、次のようなことです。

<!-- カルーセル本体 -->
<div class="my-16">
<v-carousel v-model="myCarousel">
  <v-carousel-item
    src="https://picsum.photos/1200/?random=1"
    cover
  ></v-carousel-item>

  <v-carousel-item
    src="https://picsum.photos/1200/?random=2"
    cover
  ></v-carousel-item>

  <v-carousel-item
    src="https://picsum.photos/1200/?random=3"
    cover
  ></v-carousel-item>
</v-carousel>
</div>
<!--// カルーセル本体 -->

<!-- カルーセルを進めるボタン -->
<div class="mb-16">
  <v-btn @click="myCarouselControl()">
    カルーセルを進める
  </v-btn>
</div>
<!--// カルーセルを進めるボタン -->

<!-- 現在何枚目かを表示する -->
<div class="mb-16">
  現在{{myCarousel}}枚目のスライド
</div>
<!--// 現在何枚目かを表示する -->

↑この例では、上のdivから順に、
・カルーセル本体
・スライドを進めるボタン
・現在のスライドが何枚目かの表示

を置いています。
3行目にある通り、 v-carousel に v-model でdataを紐づけておくことで、
プログラムからスライドを制御する事ができます。

23行目の v-btn を押すと、 @click=”myCarouselControl()” と書いてあるように
関数が実行されて、v-modelの値が加算、スライドが次に送られる、と言う仕組みです。

script側は、たとえば次のように書いておけば良いです。

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      let myCarousel = ref(0);
      const myCarouselControl = ()=> {
        myCarousel.value = myCarousel.value + 1;
        if(myCarousel.value >= 3){
          myCarousel.value = 0;
        }
      }
      return {
        myCarousel,
        myCarouselControl
      }
    }
  }
</script>

↑5行目で、進行状況を制御するdata変数を定義。これを v-carousel に v-model として紐づけています。
6行目が、ボタンを押したら実行される関数です。
7行目では、押したら単純にdataの値をプラスしています。
8〜10行目は、スライド枚数が最大を超えたら最初のスライドに戻るように、という記述です。
(スライド枚数は0始まりなので、0に戻しています。)