[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)で、設定されているメソッドを確認できます。

VUE.JSおすすめの書籍

書籍は読む方だと思いますが、やはり現場で実装するとより深く学べるのを実感します。
逆に実装中心だと、より良いコーディングを考えることができなくなるので書籍もあらためて読むことをおすすめします。

これからはじめるVue.js実践入門
JavaScript、Vue.jsの知識がある程度ある方向け

Vue.jsのツボとコツがゼッタイにわかる本
初心者向け

#JavaScript #Vue