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

vue-easy-sliderとは

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

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

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

 

 

環境

Vue	2.6.10
vue-easy-slider	5.3.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> に設定可能なプロパティです。

名	型	デフォルト	説明
width	String	auto	スライダー幅
height	String	300px	スライダーの高さ
touch	Boolea	true	タッチスライドを有効にする
animation	'normal', 'fade'	'normal'	アニメーションを変更する
autoplay	Boolea	true	自動再生
stopOnHover	Boolean	false	ホバー時に自動再生を停止する
interval	Number	3000	自動再生の遅延（自動再生オプションはtrueでなければなりません）
speed	Number	500	アニメーションの速度（ミリ秒）
indicators	'center', 'left', 'right', false	'center'	オプションの位置にインジケーターを表示するか、インジケーターを非表示にします
control-btn	Boolean	true	コントロールボタンを表示
before-next	Functio	() => true	次のガードの前、この関数がtrueを返すときに次のアイテムにスライドする
before-previous	Function	() => true	前のガードの前に

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

さいごに

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

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

 

今日はこの辺でー