@egjs/vue-flicking

@egjs/vue-flicking

Vue wrapper of @egjs/flicking

Demo / Documentation / Other components

⚙️ Installation

npm install --save @egjs/vue-flicking

❗ Changes from @egjs/flicking

• All camelCased event names became kebab-case
  • e.g., moveEnd => move-end
• You can't use methods that manipulates DOM directly
  • e.g., append(), remove(), ...

🏃 Quick Start

Global registration

import VueFlicking from "@egjs/vue-flicking";
Vue.use(VueFlicking);

Local registration

import { Flicking } from "@egjs/vue-flicking";

export default {
  components: {
    Flicking: Flicking,
  }
}

Usage

<template>
  <flicking
    :options="{ gap: 10, moveType='freeScroll' }"
    :tag="'div'"
    :plugins="plugins"
    @need-panel="e => {
      // ADD PANELS
    }"
    @move-end="e => {
      // HANDLE INDEX CHANGE
    }"
  >
    <div>CONTENTS OF PANEL 0</div>
    <div>CONTENTS OF PANEL 1</div>
    <div>CONTENTS OF PANEL 2</div>
  </flicking>
</template>
<script>
import { Component, Vue } from "vue-property-decorator";
import { Fade, AutoPlay } from "@egjs/flicking-plugins";

@Component({})
export default class DemoClass extends Vue {
  plugins = [new Fade(), new AutoPlay(2000, "NEXT")];
}
</script>

🔍 SSR(Server Side Rendering) Guide

Check GUIDE_SSR.md

📦 Packages

You can use all plugins just like native @egjs/flicking.

Check @egjs/flicking-plugins for readymade effects we're providing.

📖 More Examples

See demo/ for more implementation examples.

🙌 Contributing

See CONTRIBUTING.md

📝 Feedback

Please file an Issue with label "Vue".

📜 License

@egjs/flicking is released under the MIT license.