[VUE.JS]vue-carouselの使い方・設定方法

WebpackとVUE.JSの環境で、スライドを作る案件があったので、vue-carouselを使用して実装しました。
vue-carouselの使い方を簡単に説明します。

vue-carouselのインストールとセッティング

npm等使用してインストールします。
GitHubにて説明されていますがここでも同じことを書いておきます。
vue-carousel[GitHub]

//npm
npm install vue-carousel

//yarn
yarn add vue-carousel

Vueの設定

複数ページで使用する場合はGlobalに設定

//Global

import Vue from 'vue';
import VueCarousel from 'vue-carousel';

Vue.use(VueCarousel);

特定ページの場合はcompornentに対して設定

//Local

import { Carousel, Slide } from 'vue-carousel';

export default {
  ...
  components: {
    Carousel,
    Slide
  }
  ...
};

スライドの記述方法・詳細設定

HTMLの構造

htmlの記述は下記の通りです。

<carousel>
  <slide>
    Slide 1 Content
  </slide>
  <slide>
    Slide 2 Content
  </slide>
</carousel>

スライドの設定–Configuration

設定できるコンフィグの種類は、下記GitHubを参照。
vue-carousel[GitHub]

どのような動きになるかは下記サイトで確認できます。
Vue-carousel–Examples

ここでは、記述方法・コンフィグの使い方について説明します。

//<carouselに対してbindして使用
<carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false">
    <slide>
        Slide 1 Content
    </slide>
    <slide>
        Slide 2 Content
    </slide>
</carousel>

イベントの設定–Events

いくつかのEVENTが用意されています。イベントは対象の要素にv-onして使用します。

<carousel @pagination-click="restartAutoplay">
    <slide
        @slideclick="handleSlideClick">
        Slide 1 Content
    </slide>
    ...
</carousel>

上記の例だと、ページネーションをクリックしたときに、restartAutoplayメソッドが呼ばれます。
スライドをクリックしたときは、handleSlideClickが呼ばれます。

メソッドが呼ばれた際に、各イベント毎に、スライドの情報が出力できます。
例えばslideclickだと下記のようにdatasetを受け取ることができます。

handleSlideClick (dataset) => {
    console.log(dataset.index, dataset.name)
}

その他メソッドについて

vue-carouselの説明にはないのですが、様々なメソッドが使用できます。
使い方は、まずcarousel要素にrefをつけて参照できるようにします。

//carouselにrefをつける
<carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false" ref="carousel">
    <slide>
        Slide 1 Content
    </slide>
    <slide>
        Slide 2 Content
    </slide>
</carousel>

//$refs.carousel内のメソッドを使用する
 
restartAutoplay: function(index) {
    this.$refs.carousel.restartAutoplay()
}

//上記例だとオートプレイを再スタートさせる

//よく使いそうなメソッド
goToPage(5)    // 5のスライドを表示する
getNextPage()    // 次のスライドNOを取得する

上記メソッド以外にもスライドの各サイズだとかいろいろ参照できるデータがあります。
console.log(this.$refs.carousel)で、設定されているメソッドを確認できます。