カルーセルスライダーを実装できる「vue-easy-slider」

vue-easy-sliderとは

vue-easy-sliderは、カルーセルスライダーを実装できるコンポーネントライブラリです

自動スクロールはもちろん、速度の調整、スライダーの向きまで設定することが可能です。

スライダーのアニメーションは、2種類用意されています。

環境

インストール

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

npm

npm i -S vue-easy-slider

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-easy-slider.umd.js"></script>

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

https://github.com/shhdgit/vue-easy-slider

導入手順

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

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

import { Slider, SliderItem } from 'vue-easy-slider'

（2）WEBページの場合

const { Slider, SliderItem } = window['vue-easy-slider'];

2.メソッドを設定

上記で取得したSlider、SliderItem を component プロパティに取り込みます。

スライダーアイテム用の listデータを作成します。

let app = new Vue({
  el: '#app',
  components: {
    Slider,
    SliderItem,
  },
  data: {
    list: [
      { backgroundColor: '#3f51b5', width: '100%', height: '100%' },
      { backgroundColor: '#eee', width: '100%', height: '100%' },
      { backgroundColor: '#f44336', width: '100%', height: '100%' },
    ],
  }
});

3. テンプレートを準備

上記で取得したコンポーネントを配置します。

<slider> で <slider-item> を囲みます。
<slider> にはいくつかプロパティの設定が可能です。
記事内のプロパティ項目を確認してください。

今回はスライダーのアニメーションに、fadeを使用します。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <slider animation="fade">
    <slider-item
      v-for="(i, index) in list"
      :key="index"
      :style="i"
    >
      <p style="line-height: 280px; font-size: 5rem; text-align: center;">Page{{ index + 1 }}</p>
    </slider-item>
  </slider>
</div>

サンプル

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

プロパティ

<slider> に設定可能なプロパティです。

[注意] モジュール版を使用しない場合は、ケバブケースで記載しないと動作しません。

さいごに

カルーセルスライダーを実装できるコンポーネントライブラリでした。

当ブログでは、他にもいくつかカルーセルスライダーの記事を書いていますので、そちらもお試しください。

今日はこの辺でー