【Vue.js】Vue Carouselを使ってカルーセルを実装する その1【デフォルト・自動・ループ】

【Vue.js】Vue Carouselを使ってカルーセルを実装する その1【デフォルト・自動・ループ】

Vue.jsを使っているプロダクトにカルーセルを組み込もんだ時に、Vue Carouselを使いました。
簡単な使い方を何回かに分けてまとめます。
今回はデフォルトの動きと、自動再生やループ再生の実装について記載しています。

今回作ったもの

See the Pen VueCarouselNormal by duotaro (@duotaro100) on CodePen.

導入方法

こちらを参考にしてください。
ssense.github.io

ここではcdnを利用しています。

<script src="https://ssense.github.io/vue-carousel/js/vue-carousel.min.js"></script>

前提となるデータ

今回は以下のデータをループした内容をカルーセルで表示しています。

var slideData = ["label1","label2","label3","label4","label5","label6"];

デフォルト

デフォルトの状態では以下のような実装になります。
・自動移動なし
・表示コンテンツ2件
・ページごとに移動
・両脇のナビゲーションなし
・ページネーション表示

<carousel>
  <slide v-for="label in slide1">
    <span>
     {{label}}
    </span>
  </slide>
</carousel>

自動移動あり

「autoplay」を使うことで、自動でカルーセル内の移動を行います。
今回は、移動までの時間を100に設定しています。デフォルトは2000なので、20分の1の値です。
(数値を小さくすれば次のページに移動するまでの間隔が短くなります)

<carousel :autoplay="true" :autoplayTimeout="100">
  <slide v-for="label in slide1">
    <span>
     {{label}}
    </span>
  </slide>
</carousel>

自動移動あり(ループ再生)

上の例では一番最後のページまで行くとそこで止まってしまいますが、ループ再生をONにすることで永遠に動き続けます。
ループ再生は「loop」を使って設定します。デフォルトはfalseです。

<carousel :autoplay="true" :autoplayTimeout="100" :loop="true">
  <slide v-for="label in slide1">
    <span>
     {{label}}
    </span>
  </slide>
</carousel>

以上です。
次回は、ページごとの表示件数やページネーションやナビゲーションの表示制御などをまとめて行きます。