「Vue Carousel 3D」で3Dカルーセルスライダーを実装する

Vue Carousel 3Dとは

「Vue Carousel 3D」は、3Dカルーセルスライダーを実装するライブラリです。

自動再生の機能はもちろん、一時的にスライドを止めることも可能です。
スライドの方向も設定することが可能です。

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install -S vue-carousel-3d

CDN

<script src="https://cdn.jsdelivr.net/npm/vue-carousel-3d@0.2.0/dist/vue-carousel-3d.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/wlada/vue-carousel-3d

導入手順

3Dカルーセルスライダーを実装します。

1. ライブラリの取り込み

（1）webpack等の場合 ※モジュール版は未検証です。

import { Carousel3d, Slide } from 'vue-carousel-3d';

（2）WEBページの場合

なし

2.メソッドを設定

new Vue({
  el: '#app',
  data: {
    slides: 5
  },
  components: {
    'carousel-3d': Carousel3d.Carousel3d,
    'slide': Carousel3d.Slide
  }
})

3. <carousel-3d>と<slide>テンプレートを準備

<div id="app">
  <carousel-3d :controls-visible="true" :clickable="false" :autoplay="true">
      <slide v-for="(slide, i) in slides" :index="i">
        <img src="https://placehold.it/360x270">
      </slide>
  </carousel-3d>
</div>

サンプル

>>専用ページで確認する

さいごに

3Dカルーセルスライダーを実装するライブラリでした。

今日はこの辺でー