忘れないように記録しとこ

カバの樹

カルーセルスライダーを実装できる「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/vue-easy-slider@5.3.2/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 前のガードの前に

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

さいごに

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

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

 

今日はこの辺でー

 

  • B!