Eagle.js

Slide show套件

Github

zulko/eagle.js

範例

使用方式包含兩部分：

1. mixins: Slideshow
2. component: Slide

我們將利用SlideShow mixins建立內含Slide的Component。

先全域註冊Eagle模組：

import Eagle from 'eagle.js'
import 'eagle.js/dist/eagle.css'

Vue.use(Eagle);

下一步建立新的single file component，例如Slider.vue

<template>
  <div>
    <slide steps="3">
        <div v-if="step==1">
            <h1>{{ step }}</h1>
        </div>
        <div v-if="step==2">
            <h1>{{ step }}</h1>
        </div>
        <div v-if="step==3">
            <h1>{{ step }}</h1>
        </div>
    </slide>
  </div>
</template>

<script>
import { Slideshow } from "eagle.js";

export default {
  name: "slider",
  mixins: [Slideshow],
  created() {
    this.firstslide = 1;
    this.lastslide = 3;
    this.startStep = 1;
    this.zoom = true;
    this.mouseNavigation = true;
    this.keyboardNavigation = true;
    this.repeat= true;
  }
};
</script>

上面程式碼使用了

1. Slide組件和指定其Prop: steps

2. 定義於Slideshow mixins的data: step，以及以下Props：

   Prop	Description	Type	Default

   | startStep | 預設顯示第N張Slide，此為step的初始值 | Number | 1 |
   | firstslide | 第一張Slide從第幾個元素 | Number | 1 |
   | lastslide | 最後一張Slide為第幾個元素 | Number | null |
   | zoom | 支援縮放 | Boolean | true |
   | mouseNavigation | 支援滑鼠巡覽(點擊或滾輪) | Boolean | true |
   | keyboardNavigation | 支援鍵盤巡覽(左右鍵) | Boolean | true |

循環瀏覽

可利用onStartExit和onEndExit兩個事件來設定循環瀏覽。
在上一步建立的component加入以下程式碼：

methods: {
    onStartExit() {
      this.step = this.lastslide;
    },
    onEndExit() {
      this.step = this.firstslide;
    }
},

加入換頁動畫

Eagle.js採用了animate.css的各種動畫效果。

先在頁面上引用CSS檔：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

在Template中，在要使用動畫的前後加入<eg-transition></eg-transition>並設定enter和leave屬性：

<div v-if="step==1">
    <eg-transition enter="fadeInRight" leave="fadeOutUpBig">
      <h1 class="title text-center">
        <b>2018年台北地區福委會 第四季慶生會</b>
      </h1>
    </eg-transition>
</div>

Demo

完整程式碼請參考Source code

(背景圖片來源：www.happy-birthday-to-you.net)