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

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

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

GitHubにて説明されていますがここでも同じことを書いておきます。

bash

//npm
npm install vue-carousel

//yarn
yarn add vue-carousel

Vueの設定

javascript

//Global

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

Vue.use(VueCarousel);

javascript

//Local

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

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

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

HTMLの構造

text

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

スライドの設定--Configuration

text

//<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して使用します。

text

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

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

スライドをクリックしたときは、handleSlideClickが呼ばれます。

メソッドが呼ばれた際に、各イベント毎に、スライドの情報が出力できます。

例えばslideclickだと下記のようにdatasetを受け取ることができます。

javascript

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

その他メソッドについて

vue-carouselの説明にはないのですが、様々なメソッドが使用できます。

使い方は、まずcarousel要素にrefをつけて参照できるようにします。

javascript

//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おすすめの書籍

書籍は読む方だと思いますが、やはり現場で実装するとより深く学べるのを実感します。

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

JavaScript、Vue.jsの知識がある程度ある方向け

📦

Amazon で関連書籍・ツールを検索

Vue.js フロントエンド入門

Amazonで探す →（アソシエイトリンク）