目次
Vue Carousel 3Dとは
「Vue Carousel 3D」は、3Dカルーセルスライダーを実装するライブラリです。
自動再生の機能はもちろん、一時的にスライドを止めることも可能です。
スライドの方向も設定することが可能です。
インストール
以下のnpm、CDNを使ってインストールします。
npm
npm install -S vue-carousel-3d
CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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カルーセルスライダーを実装するライブラリでした。
今日はこの辺でー