Vueでカルーセルを作る

Vue.jsで簡単にカルーセルを実現できる「Vue Carousel」の使い方。
レスポンシブ対応しているし、マウスでのドラッグやスマホのスワイプでも動くし、操作感も心地よいです。
ここでは、インストールなしでファイルを直接読みこむ手軽なやり方でやります。

See the Pen vue carousel by KYOKO SUZUKA (@kyonchan) on CodePen.

公式サイトはこちら Vue Carousel

使い方

scriptファイルの読み込み
まずはvue.jsとvue carouselを読み込みます。
ここではCDNで直接読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.rawgit.com/SSENSE/vue-carousel/6823411d/dist/vue-carousel.min.js"></script>

htmlの記述
スライドさせたいコンテンツの分だけ <slide>Content</slide>を増やします。

<div id="app">
  <carousel>
    <slide>
      Slide 1 Content
    </slide>
    <slide>
      Slide 2 Content
    </slide>
    <slide>
      Slide 3 Content
    </slide>
  </carousel>
</div>

javascriptの記述

var app=new Vue({
  el: "#app",
  components: {
    'carousel': VueCarousel.Carousel,
    'slide': VueCarousel.Slide
  },
});

cssの記述
各スライド部分にVueCarousel-slideっていうクラス名が付与されるので適当にCSSで表示を調整すればOK。

.VueCarousel-slide {
  height:100px;
  color:#FFF;
  background:#59ecff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right:1px solid #FFF;
  box-sizing:border-box;
  font-size:12px;
}

オプション

いろいろオプションがあってカスタマイズできます。
（インストールしないでスクリプトファイルを直接読み込みの場合の指定方法です。）

自動再生・ループ再生

#autoplay [true/false]
#loop [true/false]

See the Pen vue carousel-autoplay by KYOKO SUZUKA (@kyonchan) on CodePen.

コンポーネントにv-bindで渡してあげればOKです。
ついでにloopも渡せば最後までいったら最初に戻ってループ再生されます。

<carousel v-bind:autoplay="true"  v-bind:loop="true">

ページ分割

#per-page [Number]

See the Pen vue carousel-perPage by KYOKO SUZUKA (@kyonchan) on CodePen.

デフォルトは2です。数を指定してあげると1画面に表示されるコンテンツの数を変更できます。

<carousel v-bind:per-page=4>

レスポンシブ

#per-page-custom [[ブレークポイント,Number],[ブレークポイント,Number]]

See the Pen vue carousel-perPageCustom by KYOKO SUZUKA (@kyonchan) on CodePen.

配列にブレイクポイントと表示したい数をセットにして入れることで、画面幅によって表示数を切り替えることができます。例では幅480px以上で3列表示。780px以上で4列表示になります。

<carousel v-bind:per-page-custom=[[480,3],[780,4]]>

スピード

#speed [Number]

See the Pen vue carousel-speed by KYOKO SUZUKA (@kyonchan) on CodePen.

スライド時のスピードを調整できます。

<carousel  v-bind:autoplay="true" v-bind:speed=2000>

ナビゲーションの表示・非表示

#navigation-enabled [true/false]

See the Pen vue carousel-navigationEnabled by KYOKO SUZUKA (@kyonchan) on CodePen.

左右にナビゲーションを表示・非表示。

<carousel  v-bind:navigation-enabled="true">

ページネーションの表示・非表示

#pagination-enabled [true/false]

See the Pen vue carousel-paginationEnabled by KYOKO SUZUKA (@kyonchan) on CodePen.

ページネーションを表示・非表示

<carousel  v-bind:pagination-enabled="false">

Silent Lips

【Vue Carousel】Vueでカルーセルを作る

使い方

オプション