この記事を書いている現在(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に戻しています。)
Vuetify3 公式の v-carousel 解説ページ
Vuetify3 公式の v-carousel
についての公式解説ページは以下になります。
Carousel component – Vuetify
v-carousel
で使用する事ができる props の一覧、詳細な仕様がまとめられている公式ページは以下になります。
v-carousel API — Vuetify
v-carousel-item API — Vuetify
Vuetify3 のUIコンポーネントを実際に使ってみた他の記事
- [Vuetify3]v-forを使って、 簡易スライドショーを表示する方法[v-window]
- [Vuetify3]Vue.js3に対応したカルーセル(スライドショー)を使う方法[v-carousel]
- [Vuetify3]Vue.js3に対応したcardを使う方法[v-card]
- [Vuetify3]Vue.js3に対応したsnackbar(通知表示)を使う方法[v-snackbar]
- [Vuetify3]Vue.js3に対応した綺麗なボタンを使う方法[v-btn]
- [Vuetify3]Vue.js3に対応したスイッチを使う方法[v-switch]
- [Vuetify3]Vue.js3に対応したラジオボタンを使う方法[v-radio]
- [Vuetify3]Vue.js3に対応したチェックボックスを使う方法[v-checkbox]
この記事のまとめ
今回は Vuetify 3 の優れた数々のコンポーネントの中から、
綺麗にスタイリングされたカード型レイアウトを作成する事ができる
カルーセル型のスライドショーを作成する事ができる
v-carousel の使用方法について、記事を書いてみました。
カルーセル型のスライドショーは、優れたJSライブラリ swiper などがありますが、
Vuetifyには v-carousel
として組み込みのスライドショーも存在しているので、
状況に応じて使い分けると良いかと思います。
この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。
※この記事は内容の品質向上を目的に、随時更新を行う場合があります。