Plugins

All plugins are available by installing @egjs/flicking-plugins

npm install @egjs/flicking-plugins

How to use

import { AutoPlay } from "@egjs/flicking-plugins";

flicking.addPlugins(new AutoPlay({ duration: 2000, direction: "NEXT", stopOnHover: false }));

정보

Some plugins require additional CSS for display buttons.
You can import them from your node_modules folder,

import "@egjs/flicking-plugins/dist/flicking-plugins.css";

Or, you can download them from CDN like

<link rel="stylesheet" href="https://naver.github.io/egjs-flicking-plugins/release/latest/dist/flicking-plugins.css">

These are the available CSS files:

flicking-plugins.css (bundled)
flicking-plugins.min.css
arrow.css
arrow.min.css
pagination.css
pagination.min.css

Autoplay

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
    <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
    <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
  </div>
</div>

js
import Flicking from "@egjs/flicking";
import { Autoplay } from "@egjs/flicking-plugins";

const flicking = new Flicking("#flick", {
  circular: true
});

flicking.addPlugins(new Autoplay());

DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";
import { Autoplay } from "@egjs/flicking-plugins";

export default class DemoComponent extends Component {
  private _plugins = [new Autoplay()];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg01.jpg" /></div>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg02.jpg" /></div>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg03.jpg" /></div>
    </Flicking>;
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>

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

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Autoplay()]
    }
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>

script
import Flicking from "@egjs/vue3-flicking";
import { Autoplay } from "@egjs/flicking-plugins";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Autoplay()]
    }
  }
}

demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
  <div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
  <div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
  <div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</ngx-flicking>

demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Autoplay } from "@egjs/flicking-plugins";

@Component({
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  public plugins: Plugin[] = [new Autoplay()];
}

DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";
import { Autoplay } from "@egjs/flicking-plugins";

export default class DemoComponent extends Component {
  private _plugins = [new Autoplay()];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg01.jpg" /></div>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg02.jpg" /></div>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg03.jpg" /></div>
    </Flicking>;
  }
}

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Autoplay } from "@egjs/flicking-plugins";

const plugins = [new Autoplay()];
</script>

<Flicking options={{ circular: true }} plugins={plugins}>
  <FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></FlickingPanel>
  <FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></FlickingPanel>
  <FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></FlickingPanel>
</Flicking>

style
.plugins-panel {
  position: relative;
  border-radius: 5px;
  width: 80%;
  margin-right: 10px;
  height: 200px;
  overflow: hidden;
}

.panel-image {
  top: -100%;
  bottom: -100%;
  width: 100%;
  margin: auto;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

Options

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
options	object	✔️	{}	Options for the AutoPlay instance
options.duration	number	✔️	2000	Time to wait before moving on to the next panel
options.animationDuration	number \| undefined	✔️	undefined	Duration of animation of moving to the next panel. If undefined, the duration option of the Flicking instance is used instead
options.direction	"PREV" \| "NEXT"	✔️	"NEXT"	The direction in which the panel moves
options.stopOnHover	boolean	✔️	false	Whether to stop when mouse hover upon the element
options.delayAfterHover	number	✔️	options.duration	If stopOnHover is true, the amount of time to wait before moving on to the next panel when mouse leaves the element

Parallax

html
<div id="flick" class="flicking-viewport parallax">
  <div class="flicking-camera">
    <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
    <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
    <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
  </div>
</div>

js
import Flicking from "@egjs/flicking";
import { Parallax } from "@egjs/flicking-plugins";

const flicking = new Flicking("#flick", {
  circular: true
});

flicking.addPlugins(new Parallax({
  "img"
}));

DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";
import { Parallax } from "@egjs/flicking-plugins";

export default class DemoComponent extends Component {
  private _plugins = [new Parallax("img")];

  public render() {
    return <Flicking className="parallax" circular={true} plugins={this._plugins}>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg01.jpg" /></div>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg02.jpg" /></div>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg03.jpg" /></div>
    </Flicking>;
  }
}

template
<Flicking class="parallax" :options="{ circular: true }" :plugins="plugins">
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>

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

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Parallax("img")]
    }
  }
}

template
<Flicking class="parallax" :options="{ circular: true }" :plugins="plugins">
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>

script
import Flicking from "@egjs/vue3-flicking";
import { Parallax } from "@egjs/flicking-plugins";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Parallax("img")]
    }
  }
}

demo.component.html
<ngx-flicking className="parallax" [options]="{ circular: true }" [plugins]="plugins">
  <div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
  <div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
  <div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</ngx-flicking>

demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Parallax } from "@egjs/flicking-plugins";

@Component({
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  public plugins: Plugin[] = [new Parallax("img")];
}

DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";
import { Parallax } from "@egjs/flicking-plugins";

export default class DemoComponent extends Component {
  private _plugins = [new Parallax("img")];

  public render() {
    return <Flicking className="parallax" circular={true} plugins={this._plugins}>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg01.jpg" /></div>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg02.jpg" /></div>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg03.jpg" /></div>
    </Flicking>;
  }
}

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Parallax } from "@egjs/flicking-plugins";

const plugins = [new Parallax("img")];
</script>

<Flicking class="parallax" options={{ circular: true }} plugins={plugins}>
  <FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></FlickingPanel>
  <FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></FlickingPanel>
  <FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></FlickingPanel>
</Flicking>

style
.plugins-panel {
  position: relative;
  border-radius: 5px;
  width: 80%;
  margin-right: 10px;
  height: 200px;
  overflow: hidden;
}

.panel-image {
  top: -100%;
  bottom: -100%;
  width: 100%;
  margin: auto;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

/* Notice that the element that you apply the effect must have a different size than the Panel. */
.parallax .panel-image {
  width: 150%;
  max-width: 150%;
}

위험

If the element that you apply the Parallax effect has the same size as the Panel element, the plugin may not work. You need to set a different size than the Panel element.

For example, in this demo the .panel-image has width: 150% property on it.

Options

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
selector	string	✔️	""	Selector of the element to apply parallax effect
scale	number	✔️	1	Effect amplication scale

Fade

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
    <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
    <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
  </div>
</div>

js
import Flicking from "@egjs/flicking";
import { Fade } from "@egjs/flicking-plugins";

const flicking = new Flicking("#flick", {
  circular: true
});

flicking.addPlugins(new Fade());

DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";
import { Fade } from "@egjs/flicking-plugins";

export default class DemoComponent extends Component {
  private _plugins = [new Fade()];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg01.jpg" /></div>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg02.jpg" /></div>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg03.jpg" /></div>
    </Flicking>;
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>

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

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Fade()]
    }
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
  <div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>

script
import Flicking from "@egjs/vue3-flicking";
import { Fade } from "@egjs/flicking-plugins";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Fade()]
    }
  }
}

demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
  <div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
  <div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
  <div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</ngx-flicking>

demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Fade } from "@egjs/flicking-plugins";

@Component({
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  public plugins: Plugin[] = [new Fade()];
}

DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";
import { Fade } from "@egjs/flicking-plugins";

export default class DemoComponent extends Component {
  private _plugins = [new Fade()];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg01.jpg" /></div>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg02.jpg" /></div>
      <div className="plugins-panel"><img className="panel-image" src="/img/demo/bg03.jpg" /></div>
    </Flicking>;
  }
}

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Fade } from "@egjs/flicking-plugins";

const plugins = [new Fade()];
</script>

<Flicking options={{ circular: true }} plugins={plugins}>
  <FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></FlickingPanel>
  <FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></FlickingPanel>
  <FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></FlickingPanel>
</Flicking>

style
.plugins-panel {
  position: relative;
  border-radius: 5px;
  width: 80%;
  margin-right: 10px;
  height: 200px;
  overflow: hidden;
}

.panel-image {
  top: -100%;
  bottom: -100%;
  width: 100%;
  margin: auto;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

Options

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
selector	string	✔️	""	The selector of the element to which the fade effect is to be applied. If the selector is blank, it applies to panel element
scale	number	✔️	1	Effect amplication scale

Arrow

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="card-panel"><span class="flicking-index">1</span></div>
    <div class="card-panel"><span class="flicking-index">2</span></div>
    <div class="card-panel"><span class="flicking-index">3</span></div>
  </div>
  <span class="flicking-arrow-prev"></span>
  <span class="flicking-arrow-next"></span>
</div>

js
import Flicking from "@egjs/flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

const flicking = new Flicking("#flick", {
  circular: true
});

flicking.addPlugins(new Arrow());

DemoComponent.jsx
import { Component } from "react";
import Flicking, { ViewportSlot } from "@egjs/react-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default class DemoComponent extends Component {
  private _plugins = [new Arrow()];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel"><span className="flicking-index">1</span></div>
      <div className="card-panel"><span className="flicking-index">2</span></div>
      <div className="card-panel"><span className="flicking-index">3</span></div>
      <ViewportSlot>
        <span className="flicking-arrow-prev"></span>
        <span className="flicking-arrow-next"></span>
      </ViewportSlot>
    </Flicking>;
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel"><span class="flicking-index">1</span></div>
  <div class="card-panel"><span class="flicking-index">2</span></div>
  <div class="card-panel"><span class="flicking-index">3</span></div>
  <span slot="viewport" class="flicking-arrow-prev"></span>
  <span slot="viewport" class="flicking-arrow-next"></span>
</Flicking>

script
import Flicking from "@egjs/vue-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Arrow()]
    }
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel"><span class="flicking-index">1</span></div>
  <div class="card-panel"><span class="flicking-index">2</span></div>
  <div class="card-panel"><span class="flicking-index">3</span></div>
  <template #viewport>
    <span class="flicking-arrow-prev"></span>
    <span class="flicking-arrow-next"></span>
  </template>
</Flicking>

script
import Flicking from "@egjs/vue3-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Arrow()]
    }
  }
}

demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
  <div flicking-panel class="card-panel"><span class="flicking-index">1</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">2</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">3</span></div>
  <span in-viewport class="flicking-arrow-prev"></span>
  <span in-viewport class="flicking-arrow-next"></span>
</ngx-flicking>

demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Arrow } from "@egjs/flicking-plugins";

@Component({
  templateUrl: './demo.component.html',
  styleUrls: [
    "../node_modules/@egjs/flicking-plugins/dist/arrow.css"
  ]
})
export class DemoComponent {
  public plugins: Plugin[] = [new Arrow()];
}

DemoComponent.jsx
import { Component } from "preact";
import Flicking, { ViewportSlot } from "@egjs/preact-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default class DemoComponent extends Component {
  private _plugins = [new Arrow()];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel"><span className="flicking-index">1</span></div>
      <div className="card-panel"><span className="flicking-index">2</span></div>
      <div className="card-panel"><span className="flicking-index">3</span></div>
      <ViewportSlot>
        <span className="flicking-arrow-prev"></span>
        <span className="flicking-arrow-next"></span>
      </ViewportSlot>
    </Flicking>;
  }
}

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

const plugins = [new Arrow()];
</script>

<Flicking options={{ circular: true }} plugins={plugins}>
  <FlickingPanel class="card-panel"><span class="flicking-index">1</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">2</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">3</span></FlickingPanel>
  <svelte:fragment slot="viewport">
    <span class="flicking-arrow-prev"></span>
    <span class="flicking-arrow-next"></span>
  </svelte:fragment>
</Flicking>

style
.card-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  box-shadow: 0 0.5em 1em -0.125em rgba(10.2, 10.2, 10.2, 0.1);
  max-width: 100%;
  font-size: 3rem;
  margin: 0.5rem;
  width: 50%;
  height: 200px;
  padding: 30px 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.flicking-index {
  position: relative;
  min-width: 60px;
  text-align: center;
}

.flicking-index::after {
  position: absolute;
  content: "PANEL";
  font-weight: bold;
  left: 0;
  bottom: -1.2rem;
  width: 100%;
  text-align: center;
  font-size: 1rem;
}

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="card-panel"><span class="flicking-index">1</span></div>
    <div class="card-panel"><span class="flicking-index">2</span></div>
    <div class="card-panel"><span class="flicking-index">3</span></div>
  </div>
  <span class="flicking-arrow-prev is-circle"></span>
  <span class="flicking-arrow-next is-circle"></span>
</div>

js
import Flicking from "@egjs/flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

const flicking = new Flicking("#flick", {
  circular: true
});

flicking.addPlugins(new Arrow());

DemoComponent.jsx
import { Component } from "react";
import Flicking, { ViewportSlot } from "@egjs/react-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default class DemoComponent extends Component {
  private _plugins = [new Arrow()];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel"><span className="flicking-index">1</span></div>
      <div className="card-panel"><span className="flicking-index">2</span></div>
      <div className="card-panel"><span className="flicking-index">3</span></div>
      <ViewportSlot>
        <span className="flicking-arrow-prev is-circle"></span>
        <span className="flicking-arrow-next is-circle"></span>
      </ViewportSlot>
    </Flicking>;
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel"><span class="flicking-index">1</span></div>
  <div class="card-panel"><span class="flicking-index">2</span></div>
  <div class="card-panel"><span class="flicking-index">3</span></div>
  <span slot="viewport" class="flicking-arrow-prev is-circle"></span>
  <span slot="viewport" class="flicking-arrow-next is-circle"></span>
</Flicking>

script
import Flicking from "@egjs/vue-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Arrow()]
    }
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel"><span class="flicking-index">1</span></div>
  <div class="card-panel"><span class="flicking-index">2</span></div>
  <div class="card-panel"><span class="flicking-index">3</span></div>
  <template #viewport>
    <span class="flicking-arrow-prev is-circle"></span>
    <span class="flicking-arrow-next is-circle"></span>
  </template>
</Flicking>

script
import Flicking from "@egjs/vue3-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Arrow()]
    }
  }
}

demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
  <div flicking-panel class="card-panel"><span class="flicking-index">1</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">2</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">3</span></div>
  <span in-viewport class="flicking-arrow-prev is-circle"></span>
  <span in-viewport class="flicking-arrow-next is-circle"></span>
</ngx-flicking>

demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Arrow } from "@egjs/flicking-plugins";

@Component({
  templateUrl: './demo.component.html',
  styleUrls: [
    "../node_modules/@egjs/flicking-plugins/dist/arrow.css"
  ]
})
export class DemoComponent {
  public plugins: Plugin[] = [new Arrow()];
}

DemoComponent.jsx
import { Component } from "preact";
import Flicking, { ViewportSlot } from "@egjs/preact-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default class DemoComponent extends Component {
  private _plugins = [new Arrow()];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel"><span className="flicking-index">1</span></div>
      <div className="card-panel"><span className="flicking-index">2</span></div>
      <div className="card-panel"><span className="flicking-index">3</span></div>
      <ViewportSlot>
        <span className="flicking-arrow-prev is-circle"></span>
        <span className="flicking-arrow-next is-circle"></span>
      </ViewportSlot>
    </Flicking>;
  }
}

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

const plugins = [new Arrow()];
</script>

<Flicking options={{ circular: true }} plugins={plugins}>
  <FlickingPanel class="card-panel"><span class="flicking-index">1</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">2</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">3</span></FlickingPanel>
  <svelte:fragment slot="viewport">
    <span class="flicking-arrow-prev is-circle"></span>
    <span class="flicking-arrow-next is-circle"></span>
  </svelte:fragment>
</Flicking>

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="card-panel"><span class="flicking-index">1</span></div>
    <div class="card-panel"><span class="flicking-index">2</span></div>
    <div class="card-panel"><span class="flicking-index">3</span></div>
  </div>
</div>
<span class="flicking-arrow-prev is-outside"></span>
<span class="flicking-arrow-next is-outside"></span>

js
import Flicking from "@egjs/flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

const flicking = new Flicking("#flick", {
  circular: true
});

flicking.addPlugins(new Arrow());

DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default class DemoComponent extends Component {
  private _plugins = [new Arrow()];

  public render() {
    return <>
    <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel"><span className="flicking-index">1</span></div>
      <div className="card-panel"><span className="flicking-index">2</span></div>
      <div className="card-panel"><span className="flicking-index">3</span></div>
    </Flicking>
    <span className="flicking-arrow-prev is-outside"></span>
    <span className="flicking-arrow-next is-outside"></span>
    </>;
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel"><span class="flicking-index">1</span></div>
  <div class="card-panel"><span class="flicking-index">2</span></div>
  <div class="card-panel"><span class="flicking-index">3</span></div>
</Flicking>
<span class="flicking-arrow-prev is-outside"></span>
<span class="flicking-arrow-next is-outside"></span>

script
import Flicking from "@egjs/vue-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Arrow()]
    }
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel"><span class="flicking-index">1</span></div>
  <div class="card-panel"><span class="flicking-index">2</span></div>
  <div class="card-panel"><span class="flicking-index">3</span></div>
</Flicking>
<span class="flicking-arrow-prev is-outside"></span>
<span class="flicking-arrow-next is-outside"></span>

script
import Flicking from "@egjs/vue3-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Arrow()]
    }
  }
}

demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
  <div flicking-panel class="card-panel"><span class="flicking-index">1</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">2</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">3</span></div>
</ngx-flicking>
<span class="flicking-arrow-prev is-outside"></span>
<span class="flicking-arrow-next is-outside"></span>

demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Arrow } from "@egjs/flicking-plugins";

@Component({
  templateUrl: './demo.component.html',
  styleUrls: [
    "../node_modules/@egjs/flicking-plugins/dist/arrow.css"
  ]
})
export class DemoComponent {
  public plugins: Plugin[] = [new Arrow()];
}

DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default class DemoComponent extends Component {
  private _plugins = [new Arrow()];

  public render() {
    return <>
    <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel"><span className="flicking-index">1</span></div>
      <div className="card-panel"><span className="flicking-index">2</span></div>
      <div className="card-panel"><span className="flicking-index">3</span></div>
    </Flicking>
    <span className="flicking-arrow-prev is-outside"></span>
    <span className="flicking-arrow-next is-outside"></span>
    </>;
  }
}

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

const plugins = [new Arrow()];
</script>

<Flicking options={{ circular: true }} plugins={plugins}>
  <FlickingPanel class="card-panel"><span class="flicking-index">1</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">2</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">3</span></FlickingPanel>
</Flicking>
<span class="flicking-arrow-prev is-outside"></span>
<span class="flicking-arrow-next is-outside"></span>

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="card-panel"><span class="flicking-index">1</span></div>
    <div class="card-panel"><span class="flicking-index">2</span></div>
    <div class="card-panel"><span class="flicking-index">3</span></div>
  </div>
</div>
<span class="flicking-arrow-prev is-thin"></span>
<span class="flicking-arrow-next is-thin"></span>

js
import Flicking from "@egjs/flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

const flicking = new Flicking("#flick", {
  circular: true
});

flicking.addPlugins(new Arrow());

DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default class DemoComponent extends Component {
  private _plugins = [new Arrow()];

  public render() {
    return <>
    <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel"><span className="flicking-index">1</span></div>
      <div className="card-panel"><span className="flicking-index">2</span></div>
      <div className="card-panel"><span className="flicking-index">3</span></div>
    </Flicking>
    <span className="flicking-arrow-prev is-thin"></span>
    <span className="flicking-arrow-next is-thin"></span>
    </>;
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel"><span class="flicking-index">1</span></div>
  <div class="card-panel"><span class="flicking-index">2</span></div>
  <div class="card-panel"><span class="flicking-index">3</span></div>
</Flicking>
<span class="flicking-arrow-prev is-thin"></span>
<span class="flicking-arrow-next is-thin"></span>

script
import Flicking from "@egjs/vue-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Arrow()]
    }
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel"><span class="flicking-index">1</span></div>
  <div class="card-panel"><span class="flicking-index">2</span></div>
  <div class="card-panel"><span class="flicking-index">3</span></div>
</Flicking>
<span class="flicking-arrow-prev is-thin"></span>
<span class="flicking-arrow-next is-thin"></span>

script
import Flicking from "@egjs/vue3-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Arrow()]
    }
  }
}

demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
  <div flicking-panel class="card-panel"><span class="flicking-index">1</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">2</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">3</span></div>
</ngx-flicking>
<span class="flicking-arrow-prev is-thin"></span>
<span class="flicking-arrow-next is-thin"></span>

demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Arrow } from "@egjs/flicking-plugins";

@Component({
  templateUrl: './demo.component.html',
  styleUrls: [
    "../node_modules/@egjs/flicking-plugins/dist/arrow.css"
  ]
})
export class DemoComponent {
  public plugins: Plugin[] = [new Arrow()];
}

DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default class DemoComponent extends Component {
  private _plugins = [new Arrow()];

  public render() {
    return <>
    <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel"><span className="flicking-index">1</span></div>
      <div className="card-panel"><span className="flicking-index">2</span></div>
      <div className="card-panel"><span className="flicking-index">3</span></div>
    </Flicking>
    <span className="flicking-arrow-prev is-thin"></span>
    <span className="flicking-arrow-next is-thin"></span>
    </>;
  }
}

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

const plugins = [new Arrow()];
</script>

<Flicking options={{ circular: true }} plugins={plugins}>
  <FlickingPanel class="card-panel"><span class="flicking-index">1</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">2</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">3</span></FlickingPanel>
</Flicking>
<span class="flicking-arrow-prev is-thin"></span>
<span class="flicking-arrow-next is-thin"></span>

Options

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
parentEl	HTMLElement \| null	✔️	null	The parent element to query `prevElSelector` and `nextElSelector`. If `null` is given, it will search the element inside wrapper element(`.flicking-viewport`) of Flicking.
prevElSelector	string	✔️	".flicking-arrow-prev"	CSS selector to find query the prev arrow element
nextElSelector	string	✔️	".flicking-arrow-next"	CSS selector to find query the next arrow element
disabledClass	string	✔️	"flicking-arrow-disabled"	A class to apply when Flicking reachs edge
moveCount	number	✔️	1	A number of skipping panels with one click
moveByViewportSize	boolean	✔️	false	Effective for "freeScroll" moveType, enabling this will scroll camera by the size of viewport per click

Pagination

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="card-panel"><span class="flicking-index">1</span></div>
    <div class="card-panel"><span class="flicking-index">2</span></div>
    <div class="card-panel"><span class="flicking-index">3</span></div>
    <div class="card-panel"><span class="flicking-index">4</span></div>
    <div class="card-panel"><span class="flicking-index">5</span></div>
    <div class="card-panel"><span class="flicking-index">6</span></div>
    <div class="card-panel"><span class="flicking-index">7</span></div>
    <div class="card-panel"><span class="flicking-index">8</span></div>
  </div>
  <div class="flicking-pagination"></div>
</div>

js
import Flicking from "@egjs/flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

const flicking = new Flicking("#flick", {
  circular: true
});

flicking.addPlugins(new Pagination({
  type: "bullet"
}));

DemoComponent.jsx
import { Component } from "react";
import Flicking, { ViewportSlot } from "@egjs/react-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

export default class DemoComponent extends Component {
  private _plugins = [new Pagination({ type: 'bullet' })];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel"><span className="flicking-index">1</span></div>
      <div className="card-panel"><span className="flicking-index">2</span></div>
      <div className="card-panel"><span className="flicking-index">3</span></div>
      <div className="card-panel"><span className="flicking-index">4</span></div>
      <div className="card-panel"><span className="flicking-index">5</span></div>
      <div className="card-panel"><span className="flicking-index">6</span></div>
      <div className="card-panel"><span className="flicking-index">7</span></div>
      <div className="card-panel"><span className="flicking-index">8</span></div>
      <ViewportSlot>
        <div className="flicking-pagination"></div>
      </ViewportSlot>
    </Flicking>;
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel"><span class="flicking-index">1</span></div>
  <div class="card-panel"><span class="flicking-index">2</span></div>
  <div class="card-panel"><span class="flicking-index">3</span></div>
  <div class="card-panel"><span class="flicking-index">4</span></div>
  <div class="card-panel"><span class="flicking-index">5</span></div>
  <div class="card-panel"><span class="flicking-index">6</span></div>
  <div class="card-panel"><span class="flicking-index">7</span></div>
  <div class="card-panel"><span class="flicking-index">8</span></div>
  <div slot="viewport" class="flicking-pagination"></div>
</Flicking>

script
import Flicking from "@egjs/vue-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Pagination({ type: 'bullet' })]
    }
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel"><span class="flicking-index">1</span></div>
  <div class="card-panel"><span class="flicking-index">2</span></div>
  <div class="card-panel"><span class="flicking-index">3</span></div>
  <div class="card-panel"><span class="flicking-index">4</span></div>
  <div class="card-panel"><span class="flicking-index">5</span></div>
  <div class="card-panel"><span class="flicking-index">6</span></div>
  <div class="card-panel"><span class="flicking-index">7</span></div>
  <div class="card-panel"><span class="flicking-index">8</span></div>
  <template #viewport>
    <div class="flicking-pagination"></div>
  </template>
</Flicking>

script
import Flicking from "@egjs/vue3-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Pagination({ type: 'bullet' })]
    }
  }
}

demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
  <div flicking-panel class="card-panel"><span class="flicking-index">1</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">2</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">3</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">4</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">5</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">6</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">7</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">8</span></div>
  <div in-viewport class="flicking-pagination"></div>
</ngx-flicking>

demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Pagination } from "@egjs/flicking-plugins";

@Component({
  templateUrl: './demo.component.html',
  styleUrls: [
    "../node_modules/@egjs/flicking-plugins/dist/pagination.css"
  ]
})
export class DemoComponent {
  public plugins: Plugin[] = [new Pagination({ type: 'bullet' })];
}

DemoComponent.jsx
import { Component } from "preact";
import Flicking, { ViewportSlot } from "@egjs/preact-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

export default class DemoComponent extends Component {
  private _plugins = [new Pagination({ type: 'bullet' })];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel"><span className="flicking-index">1</span></div>
      <div className="card-panel"><span className="flicking-index">2</span></div>
      <div className="card-panel"><span className="flicking-index">3</span></div>
      <div className="card-panel"><span className="flicking-index">4</span></div>
      <div className="card-panel"><span className="flicking-index">5</span></div>
      <div className="card-panel"><span className="flicking-index">6</span></div>
      <div className="card-panel"><span className="flicking-index">7</span></div>
      <div className="card-panel"><span className="flicking-index">8</span></div>
      <ViewportSlot>
        <div className="flicking-pagination"></div>
      </ViewportSlot>
    </Flicking>;
  }
}

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

const plugins = [new Pagination({ type: 'bullet' })];
</script>

<Flicking options={{ circular: true }} plugins={plugins}>
  <FlickingPanel class="card-panel"><span class="flicking-index">1</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">2</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">3</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">4</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">5</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">6</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">7</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">8</span></FlickingPanel>
  <svelte:fragment slot="viewport">
    <div class="flicking-pagination"></div>
  </svelte:fragment>
</Flicking>

style
.flicking-viewport {
  padding-bottom: 3rem !important;
}

.card-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  box-shadow: 0 0.5em 1em -0.125em rgba(10.2, 10.2, 10.2, 0.1);
  max-width: 100%;
  font-size: 3rem;
  margin: 0.5rem;
  width: 50%;
  height: 200px;
  padding: 30px 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.flicking-index {
  position: relative;
  min-width: 60px;
  text-align: center;
}

.flicking-index::after {
  position: absolute;
  content: "PANEL";
  font-weight: bold;
  left: 0;
  bottom: -1.2rem;
  width: 100%;
  text-align: center;
  font-size: 1rem;
}

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="card-panel"><span class="flicking-index">1</span></div>
    <div class="card-panel"><span class="flicking-index">2</span></div>
    <div class="card-panel"><span class="flicking-index">3</span></div>
    <div class="card-panel"><span class="flicking-index">4</span></div>
    <div class="card-panel"><span class="flicking-index">5</span></div>
    <div class="card-panel"><span class="flicking-index">6</span></div>
    <div class="card-panel"><span class="flicking-index">7</span></div>
    <div class="card-panel"><span class="flicking-index">8</span></div>
  </div>
  <div class="flicking-pagination"></div>
</div>

js
import Flicking from "@egjs/flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

const flicking = new Flicking("#flick", {
  circular: true
});

flicking.addPlugins(new Pagination({
  type: "fraction"
}));

DemoComponent.jsx
import { Component } from "react";
import Flicking, { ViewportSlot } from "@egjs/react-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

export default class DemoComponent extends Component {
  private _plugins = [new Pagination({ type: 'fraction' })];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel"><span className="flicking-index">1</span></div>
      <div className="card-panel"><span className="flicking-index">2</span></div>
      <div className="card-panel"><span className="flicking-index">3</span></div>
      <div className="card-panel"><span className="flicking-index">4</span></div>
      <div className="card-panel"><span className="flicking-index">5</span></div>
      <div className="card-panel"><span className="flicking-index">6</span></div>
      <div className="card-panel"><span className="flicking-index">7</span></div>
      <div className="card-panel"><span className="flicking-index">8</span></div>
      <ViewportSlot>
        <div className="flicking-pagination"></div>
      </ViewportSlot>
    </Flicking>;
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel"><span class="flicking-index">1</span></div>
  <div class="card-panel"><span class="flicking-index">2</span></div>
  <div class="card-panel"><span class="flicking-index">3</span></div>
  <div class="card-panel"><span class="flicking-index">4</span></div>
  <div class="card-panel"><span class="flicking-index">5</span></div>
  <div class="card-panel"><span class="flicking-index">6</span></div>
  <div class="card-panel"><span class="flicking-index">7</span></div>
  <div class="card-panel"><span class="flicking-index">8</span></div>
  <div slot="viewport" class="flicking-pagination"></div>
</Flicking>

script
import Flicking from "@egjs/vue-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Pagination({ type: 'fraction' })]
    }
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel"><span class="flicking-index">1</span></div>
  <div class="card-panel"><span class="flicking-index">2</span></div>
  <div class="card-panel"><span class="flicking-index">3</span></div>
  <div class="card-panel"><span class="flicking-index">4</span></div>
  <div class="card-panel"><span class="flicking-index">5</span></div>
  <div class="card-panel"><span class="flicking-index">6</span></div>
  <div class="card-panel"><span class="flicking-index">7</span></div>
  <div class="card-panel"><span class="flicking-index">8</span></div>
  <template #viewport>
    <div class="flicking-pagination"></div>
  </template>
</Flicking>

script
import Flicking from "@egjs/vue3-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Pagination({ type: 'fraction' })]
    }
  }
}

demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
  <div flicking-panel class="card-panel"><span class="flicking-index">1</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">2</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">3</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">4</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">5</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">6</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">7</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">8</span></div>
  <div in-viewport class="flicking-pagination"></div>
</ngx-flicking>

demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Pagination } from "@egjs/flicking-plugins";

@Component({
  templateUrl: './demo.component.html',
  styleUrls: [
    "../node_modules/@egjs/flicking-plugins/dist/pagination.css"
  ]
})
export class DemoComponent {
  public plugins: Plugin[] = [new Pagination({ type: 'fraction' })];
}

DemoComponent.jsx
import { Component } from "preact";
import Flicking, { ViewportSlot } from "@egjs/preact-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

export default class DemoComponent extends Component {
  private _plugins = [new Pagination({ type: 'fraction' })];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel"><span className="flicking-index">1</span></div>
      <div className="card-panel"><span className="flicking-index">2</span></div>
      <div className="card-panel"><span className="flicking-index">3</span></div>
      <div className="card-panel"><span className="flicking-index">4</span></div>
      <div className="card-panel"><span className="flicking-index">5</span></div>
      <div className="card-panel"><span className="flicking-index">6</span></div>
      <div className="card-panel"><span className="flicking-index">7</span></div>
      <div className="card-panel"><span className="flicking-index">8</span></div>
      <ViewportSlot>
        <div className="flicking-pagination"></div>
      </ViewportSlot>
    </Flicking>;
  }
}

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

const plugins = [new Pagination({ type: 'fraction' })];
</script>

<Flicking options={{ circular: true }} plugins={plugins}>
  <FlickingPanel class="card-panel"><span class="flicking-index">1</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">2</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">3</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">4</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">5</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">6</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">7</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">8</span></FlickingPanel>
  <svelte:fragment slot="viewport">
    <div class="flicking-pagination"></div>
  </svelte:fragment>
</Flicking>

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="card-panel"><span class="flicking-index">1</span></div>
    <div class="card-panel"><span class="flicking-index">2</span></div>
    <div class="card-panel"><span class="flicking-index">3</span></div>
    <div class="card-panel"><span class="flicking-index">4</span></div>
    <div class="card-panel"><span class="flicking-index">5</span></div>
    <div class="card-panel"><span class="flicking-index">6</span></div>
    <div class="card-panel"><span class="flicking-index">7</span></div>
    <div class="card-panel"><span class="flicking-index">8</span></div>
  </div>
  <div class="flicking-pagination"></div>
</div>

js
import Flicking from "@egjs/flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

const flicking = new Flicking("#flick", {
  circular: true
});

flicking.addPlugins(new Pagination({
  type: "scroll"
}));

DemoComponent.jsx
import { Component } from "react";
import Flicking, { ViewportSlot } from "@egjs/react-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

export default class DemoComponent extends Component {
  private _plugins = [new Pagination({ type: 'scroll' })];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel"><span className="flicking-index">1</span></div>
      <div className="card-panel"><span className="flicking-index">2</span></div>
      <div className="card-panel"><span className="flicking-index">3</span></div>
      <div className="card-panel"><span className="flicking-index">4</span></div>
      <div className="card-panel"><span className="flicking-index">5</span></div>
      <div className="card-panel"><span className="flicking-index">6</span></div>
      <div className="card-panel"><span className="flicking-index">7</span></div>
      <div className="card-panel"><span className="flicking-index">8</span></div>
      <ViewportSlot>
        <div className="flicking-pagination"></div>
      </ViewportSlot>
    </Flicking>;
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel"><span class="flicking-index">1</span></div>
  <div class="card-panel"><span class="flicking-index">2</span></div>
  <div class="card-panel"><span class="flicking-index">3</span></div>
  <div class="card-panel"><span class="flicking-index">4</span></div>
  <div class="card-panel"><span class="flicking-index">5</span></div>
  <div class="card-panel"><span class="flicking-index">6</span></div>
  <div class="card-panel"><span class="flicking-index">7</span></div>
  <div class="card-panel"><span class="flicking-index">8</span></div>
  <div slot="viewport" class="flicking-pagination"></div>
</Flicking>

script
import Flicking from "@egjs/vue-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Pagination({ type: 'scroll' })]
    }
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel"><span class="flicking-index">1</span></div>
  <div class="card-panel"><span class="flicking-index">2</span></div>
  <div class="card-panel"><span class="flicking-index">3</span></div>
  <div class="card-panel"><span class="flicking-index">4</span></div>
  <div class="card-panel"><span class="flicking-index">5</span></div>
  <div class="card-panel"><span class="flicking-index">6</span></div>
  <div class="card-panel"><span class="flicking-index">7</span></div>
  <div class="card-panel"><span class="flicking-index">8</span></div>
  <template #viewport>
    <div class="flicking-pagination"></div>
  </template>
</Flicking>

script
import Flicking from "@egjs/vue3-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Pagination({ type: 'scroll' })]
    }
  }
}

demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
  <div flicking-panel class="card-panel"><span class="flicking-index">1</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">2</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">3</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">4</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">5</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">6</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">7</span></div>
  <div flicking-panel class="card-panel"><span class="flicking-index">8</span></div>
  <div in-viewport class="flicking-pagination"></div>
</ngx-flicking>

demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Pagination } from "@egjs/flicking-plugins";

@Component({
  templateUrl: './demo.component.html',
  styleUrls: [
    "../node_modules/@egjs/flicking-plugins/dist/pagination.css"
  ]
})
export class DemoComponent {
  public plugins: Plugin[] = [new Pagination({ type: 'scroll' })];
}

DemoComponent.jsx
import { Component } from "preact";
import Flicking, { ViewportSlot } from "@egjs/preact-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

export default class DemoComponent extends Component {
  private _plugins = [new Pagination({ type: 'scroll' })];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel"><span className="flicking-index">1</span></div>
      <div className="card-panel"><span className="flicking-index">2</span></div>
      <div className="card-panel"><span className="flicking-index">3</span></div>
      <div className="card-panel"><span className="flicking-index">4</span></div>
      <div className="card-panel"><span className="flicking-index">5</span></div>
      <div className="card-panel"><span className="flicking-index">6</span></div>
      <div className="card-panel"><span className="flicking-index">7</span></div>
      <div className="card-panel"><span className="flicking-index">8</span></div>
      <ViewportSlot>
        <div className="flicking-pagination"></div>
      </ViewportSlot>
    </Flicking>;
  }
}

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";

const plugins = [new Pagination({ type: 'scroll' })];
</script>

<Flicking options={{ circular: true }} plugins={plugins}>
  <FlickingPanel class="card-panel"><span class="flicking-index">1</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">2</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">3</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">4</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">5</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">6</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">7</span></FlickingPanel>
  <FlickingPanel class="card-panel"><span class="flicking-index">8</span></FlickingPanel>
  <svelte:fragment slot="viewport">
    <div class="flicking-pagination"></div>
  </svelte:fragment>
</Flicking>

Options

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
parentEl	HTMLElement \| null	✔️	null	The parent element to query `selector`. If `null` is given, it will search the element inside wrapper element(`.flicking-viewport`) of Flicking.
selector	string	✔️	".flicking-pagination"	CSS selector to find query the pagination element
type	"bullet" \| "fraction" \| "scroll"	✔️	"bullet"	A style of pagination to apply
classPrefix	string	✔️	"flicking-pagination"	A class prefix for automatically generated elements
bulletCount	number	✔️	5	A number of visual bullets when "scroll" type is chosen
renderBullet	function	✔️	(className: string) => `<span class="${className}"></span>`	A render function for bullets, effective for "bullet" and "scroll" type
renderActiveBullet	function \| null	✔️	null	A render function for the active(selected) bullet, effective for "bullet" and "scroll" type. If `null` is given, `renderBullet` will be used instead.
renderFraction	function	✔️	(currentClass: string, totalClass: string) => `<span class="${currentClass}"></span>/<span class="${totalClass}"></span>`	A render function for fraction, effective for "fration" type
fractionCurrentFormat	function	✔️	(index: number) => index.toString()	A format to display a current index inside `fraction-current` class
fractionTotalFormat	function	✔️	(index: number) => index.toString()	A format to display a total panels count inside `fraction-total` class
scrollOnChange	function	✔️	(index: number, ctx: ScrollContext) => ctx.moveTo(index)	A callback function triggered when the active bullet changes

Sync

🍎 Apple🍉 Watermelon🥝 Kiwi🍌 Banana🍊 Orange🍋 Lemon🍈 Melon🍑 Peach🍍 Pineapple🍓 Strawberry🍒 Cherry

🍔 Hamburger🍕 Pizza🍞 Bread🍜 Ramen🍦 Ice cream🍮 Pudding🍩 Donut🍪 Cookie🍚 Rice🧀 Cheese🌭 Hot dog🥓 Bacon🥪 Sandwich

🥛 Milk☕ Coffee🍵 Green tea🍺 Beer🧃 Juice🍷 Wine🥃 Whisky🍸 Cocktail🍶 Sake

html
<div id="flick0" class="flicking-viewport">
  <div class="flicking-camera">
    <span class="button mr-2 is-white">🍎 Apple</span>
    <span class="button mr-2 is-white">🍉 Watermelon</span>
    <span class="button mr-2 is-white">🥝 Kiwi</span>
    <span class="button mr-2 is-white">...</span>
  </div>
</div>
<div id="flick1" class="flicking-viewport">
  <div class="flicking-camera">
    <span class="button mr-2 is-white">🍔 Hamburger</span>
    <span class="button mr-2 is-white">🍕 Pizza</span>
    <span class="button mr-2 is-white">🍞 Bread</span>
    <span class="button mr-2 is-white">...</span>
  </div>
</div>
<div id="flick2" class="flicking-viewport">
  <div class="flicking-camera">
    <span class="button mr-2 is-white">🥛 Milk</span>
    <span class="button mr-2 is-white">☕ Coffee</span>
    <span class="button mr-2 is-white">🍵 Green tea</span>
    <span class="button mr-2 is-white">...</span>
  </div>
</div>

js
import Flicking, { ALIGN } from "@egjs/flicking";
import { Sync } from "@egjs/flicking-plugins";

const flicking0 = new Flicking("#flick0", {
  bound: true,
  bounce: 30,
  align: ALIGN.PREV
});

const flicking1 = new Flicking("#flick1", {
  bound: true,
  bounce: 30,
  align: ALIGN.PREV
});

const flicking2 = new Flicking("#flick2", {
  bound: true,
  bounce: 30,
  align: ALIGN.PREV
});

flicking0.addPlugins(new Sync({
  type: "camera",
  synchronizedFlickingOptions: [
    {
      flicking: flicking0,
      isClickable: false
    },
    {
      flicking: flicking1,
      isClickable: false
    },
    {
      flicking: flicking2,
      isClickable: false
    }
  ]
}));

export default () => {
  const flicking0 = useRef();
  const flicking1 = useRef();
  const flicking2 = useRef();

  const [plugins, setPlugins] = useState([]);

  useEffect(() => {
    setPlugins([new Sync({
      type: "camera",
      synchronizedFlickingOptions: [
        {
          flicking: flicking0.current,
          isClickable: false
        },
        {
          flicking: flicking1.current,
          isClickable: false
        },
        {
          flicking: flicking2.current,
          isClickable: false
        }
      ]
    })]);
  }, []);

  return <Flicking ref={flicking0}
    className="mb-4"
    align="prev"
    bound={true}
    bounce={30}
    plugins={plugins}>
    <span className="button mr-2 is-white">🍎 Apple</span>
    <span className="button mr-2 is-white">🍉 Watermelon</span>
    <span className="button mr-2 is-white">🥝 Kiwi</span>
    <span className="button mr-2 is-white">...</span>
  </Flicking>
  <Flicking ref={flicking1}
    className="mb-4"
    align="prev"
    bound={true}
    bounce={30}>
    <span className="button mr-2 is-white">🍔 Hamburger</span>
    <span className="button mr-2 is-white">🍕 Pizza</span>
    <span className="button mr-2 is-white">🍞 Bread</span>
    <span className="button mr-2 is-white">...</span>
  </Flicking>
  <Flicking ref={flicking2}
    align="prev"
    bound={true}
    bounce={30}>
    <span className="button mr-2 is-white">🥛 Milk</span>
    <span className="button mr-2 is-white">☕ Coffee</span>
    <span className="button mr-2 is-white">🍵 Green tea</span>
    <span className="button mr-2 is-white">...</span>
  </Flicking>
};

<template>
  <div class="wrapper">
    <flicking ref="flicking0" :options="{ bound: true, bounce: 30, align: 'prev' }" :plugins="plugins">
      <span className="button mr-2 is-white">🍎 Apple</span>
      <span className="button mr-2 is-white">🍉 Watermelon</span>
      <span className="button mr-2 is-white">🥝 Kiwi</span>
      <span className="button mr-2 is-white">...</span>
    </flicking>
    <flicking ref="flicking1" :options="{ bound: true, bounce: 30, align: 'prev' }">
      <span className="button mr-2 is-white">🍔 Hamburger</span>
      <span className="button mr-2 is-white">🍕 Pizza</span>
      <span className="button mr-2 is-white">🍞 Bread</span>
      <span className="button mr-2 is-white">...</span>
    </flicking>
    <flicking ref="flicking2" :options="{ bound: true, bounce: 30, align: 'prev' }">
      <span className="button mr-2 is-white">🥛 Milk</span>
      <span className="button mr-2 is-white">☕ Coffee</span>
      <span className="button mr-2 is-white">🍵 Green tea</span>
      <span className="button mr-2 is-white">...</span>
    </flicking>
  </div>
</template>
<script>
import { Sync } from "@egjs/flicking-plugins";

export default {
  data() {
    return {
      plugins: []
    }
  },
  mounted() {
    this.plugins = [new Sync({
      type: "camera",
      synchronizedFlickingOptions: [
        {
          flicking: this.$refs.flicking0,
          isClickable: false
        },
        {
          flicking: this.$refs.flicking1,
          isClickable: false
        },
        {
          flicking: this.$refs.flicking2,
          isClickable: false
        }
      ]
    })];
  }
}
</script>

<template>
  <div class="wrapper">
    <flicking ref="flicking0" :options="{ bound: true, bounce: 30, align: 'prev' }" :plugins="plugins">
      <span className="button mr-2 is-white">🍎 Apple</span>
      <span className="button mr-2 is-white">🍉 Watermelon</span>
      <span className="button mr-2 is-white">🥝 Kiwi</span>
      <span className="button mr-2 is-white">...</span>
    </flicking>
    <flicking ref="flicking1" :options="{ bound: true, bounce: 30, align: 'prev' }">
      <span className="button mr-2 is-white">🍔 Hamburger</span>
      <span className="button mr-2 is-white">🍕 Pizza</span>
      <span className="button mr-2 is-white">🍞 Bread</span>
      <span className="button mr-2 is-white">...</span>
    </flicking>
    <flicking ref="flicking2" :options="{ bound: true, bounce: 30, align: 'prev' }">
      <span className="button mr-2 is-white">🥛 Milk</span>
      <span className="button mr-2 is-white">☕ Coffee</span>
      <span className="button mr-2 is-white">🍵 Green tea</span>
      <span className="button mr-2 is-white">...</span>
    </flicking>
  </div>
</template>
<script>
import { Sync } from "@egjs/flicking-plugins";

export default {
  data() {
    return {
      plugins: []
    }
  },
  mounted() {
    this.plugins = [new Sync({
      type: "camera",
      synchronizedFlickingOptions: [
        {
          flicking: this.$refs.flicking0,
          isClickable: false
        },
        {
          flicking: this.$refs.flicking1,
          isClickable: false
        },
        {
          flicking: this.$refs.flicking2,
          isClickable: false
        }
      ]
    })];
  }
}
</script>

app.component.html
<ngx-flicking #flicking0 [options]="{ bound: true, bounce: 30, align: 'prev' }" [plugins]="plugins">
  <span flicking-panel class="button mr-2 is-white">🍎 Apple</span>
  <span flicking-panel class="button mr-2 is-white">🍉 Watermelon</span>
  <span flicking-panel class="button mr-2 is-white">🥝 Kiwi</span>
  <span flicking-panel class="button mr-2 is-white">...</span>
</ngx-flicking>
<ngx-flicking #flicking1 [options]="{ bound: true, bounce: 30, align: 'prev' }">
  <span flicking-panel class="button mr-2 is-white">🍔 Hamburger</span>
  <span flicking-panel class="button mr-2 is-white">🍕 Pizza</span>
  <span flicking-panel class="button mr-2 is-white">🍞 Bread</span>
  <span flicking-panel class="button mr-2 is-white">...</span>
</ngx-flicking>
<ngx-flicking #flicking2 [options]="{ bound: true, bounce: 30, align: 'prev' }">
  <span flicking-panel class="button mr-2 is-white">🥛 Milk</span>
  <span flicking-panel class="button mr-2 is-white">☕ Coffee</span>
  <span flicking-panel class="button mr-2 is-white">🍵 Green tea</span>
  <span flicking-panel class="button mr-2 is-white">...</span>
</ngx-flicking>

app.component.ts
import { Component, OnInit, ViewChild } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Sync } from "@egjs/flicking-plugins";

@Component({})
export class DemoComponent {
  @ViewChild("flicking0", { static: true }) flicking0: NgxFlickingComponent;
  @ViewChild("flicking1", { static: true }) flicking1: NgxFlickingComponent;
  @ViewChild("flicking2", { static: true }) flicking2: NgxFlickingComponent;

  public plugins: Plugin[] = [];

  public ngOnInit() {
    this.plugins = [new Sync({
      type: "camera",
      synchronizedFlickingOptions: [
        {
          flicking: this.flicking0,
          isClickable: false
        },
        {
          flicking: this.flicking1,
          isClickable: false
        },
        {
          flicking: this.flicking2,
          isClickable: false
        }
      ]
    })]
  }
}

export default () => {
  const flicking0 = useRef();
  const flicking1 = useRef();
  const flicking2 = useRef();

  const [plugins, setPlugins] = useState([]);

  useEffect(() => {
    setPlugins([new Sync({
      type: "camera",
      synchronizedFlickingOptions: [
        {
          flicking: flicking0.current,
          isClickable: false
        },
        {
          flicking: flicking1.current,
          isClickable: false
        },
        {
          flicking: flicking2.current,
          isClickable: false
        }
      ]
    })]);
  }, []);

  return <Flicking ref={flicking0}
    className="mb-4"
    align="prev"
    bound={true}
    bounce={30}
    plugins={plugins}>
    <span className="button mr-2 is-white">🍎 Apple</span>
    <span className="button mr-2 is-white">🍉 Watermelon</span>
    <span className="button mr-2 is-white">🥝 Kiwi</span>
    <span className="button mr-2 is-white">...</span>
  </Flicking>
  <Flicking ref={flicking1}
    className="mb-4"
    align="prev"
    bound={true}
    bounce={30}>
    <span className="button mr-2 is-white">🍔 Hamburger</span>
    <span className="button mr-2 is-white">🍕 Pizza</span>
    <span className="button mr-2 is-white">🍞 Bread</span>
    <span className="button mr-2 is-white">...</span>
  </Flicking>
  <Flicking ref={flicking2}
    align="prev"
    bound={true}
    bounce={30}>
    <span className="button mr-2 is-white">🥛 Milk</span>
    <span className="button mr-2 is-white">☕ Coffee</span>
    <span className="button mr-2 is-white">🍵 Green tea</span>
    <span className="button mr-2 is-white">...</span>
  </Flicking>
};

<script>
  import { onMount } from "svelte";
  import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
  import { Sync } from "@egjs/flicking-plugins";
  import "@egjs/svelte-flicking/dist/flicking.css";

  let flicking0;
  let flicking1;
  let flicking2;

  let plugins = [];

  onMount(() => {
    plugins = [new Sync({
      type: "camera",
      synchronizedFlickingOptions: [
        {
          flicking: flicking0.vanillaFlicking,
          isClickable: false
        },
        {
          flicking: flicking1.vanillaFlicking,
          isClickable: false
        },
        {
          flicking: flicking2.vanillaFlicking,
          isClickable: false
        }
      ]
    })];
  });
</script>

<Flicking bind:this={flicking0} class="mb-4"
  options={{ align: "prev", bound: true, bounce: 30 }}
  plugins={plugins}>
  <FlickingPanel class="button mr-2 is-white">🍎 Apple</FlickingPanel>
  <FlickingPanel class="button mr-2 is-white">🍉 Watermelon</FlickingPanel>
  <FlickingPanel class="button mr-2 is-white">🥝 Kiwi</FlickingPanel>
</Flicking>
<Flicking bind:this={flicking1} class="mb-4"
  options={{ align: "prev", bound: true, bounce: 30 }}>
  <FlickingPanel class="button mr-2 is-white">🍔 Hamburger</FlickingPanel>
  <FlickingPanel class="button mr-2 is-white">🍕 Pizza</FlickingPanel>
  <FlickingPanel class="button mr-2 is-white">🍞 Bread</FlickingPanel>
</Flicking>
<Flicking bind:this={flicking2} class="mb-4"
  options={{ align: "prev", bound: true, bounce: 30 }}>
  <FlickingPanel class="button mr-2 is-white">🥛 Milk</FlickingPanel>
  <FlickingPanel class="button mr-2 is-white">☕ Coffee</FlickingPanel>
  <FlickingPanel class="button mr-2 is-white">🍵 Green tea</FlickingPanel>
</Flicking>

html
<div id="flick0" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="flicking-panel full has-background-primary">
      <img class="panel-image" src="/img/demo/bg01.jpg" />
    </div>
    <div class="flicking-panel full has-background-primary">
      <img class="panel-image" src="/img/demo/bg02.jpg" />
    </div>
    <div class="flicking-panel full has-background-primary">
      <img class="panel-image" src="/img/demo/bg03.jpg" />
    </div>
    <div class="flicking-panel full has-background-primary">
      <img class="panel-image" src="/img/demo/bg04.jpg" />
    </div>
    <div class="flicking-panel full has-background-primary">
      <img class="panel-image" src="/img/demo/bg05.jpg" />
    </div>
    <div class="flicking-panel full has-background-primary">
      <img class="panel-image" src="/img/demo/bg06.jpg" />
    </div>
  </div>
</div>
<div id="flick1" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="flicking-panel thumb has-background-primary">
      <img class="thumb-image" src="/img/demo/bg01.jpg" />
    </div>
    <div class="flicking-panel thumb has-background-primary">
      <img class="thumb-image" src="/img/demo/bg02.jpg" />
    </div>
    <div class="flicking-panel thumb has-background-primary">
      <img class="thumb-image" src="/img/demo/bg03.jpg" />
    </div>
    <div class="flicking-panel thumb has-background-primary">
      <img class="thumb-image" src="/img/demo/bg04.jpg" />
    </div>
    <div class="flicking-panel thumb has-background-primary">
      <img class="thumb-image" src="/img/demo/bg05.jpg" />
    </div>
    <div class="flicking-panel thumb has-background-primary">
      <img class="thumb-image" src="/img/demo/bg06.jpg" />
    </div>
  </div>
</div>

js
import Flicking, { MOVE_TYPE } from "@egjs/flicking";
import { Sync } from "@egjs/flicking-plugins";

const flicking0 = new Flicking("#flick0", {
  bounce: 30
});

const flicking1 = new Flicking("#flick1", {
  bound: true,
  bounce: 30,
  moveType: MOVE_TYPE.FREE_SCROLL
});

flicking0.addPlugins(new Sync({
  type: "index",
  synchronizedFlickingOptions: [
    {
      flicking: flicking0,
      isSlidable: true
    },
    {
      flicking: flicking1,
      isClickable: true,
      activeClass: "active"
    }
  ]
}));

export default () => {
  const flicking0 = useRef();
  const flicking1 = useRef();

  const [plugins, setPlugins] = useState([]);

  useEffect(() => {
    setPlugins([new Sync({
      type: "index",
      synchronizedFlickingOptions: [
        {
          flicking: flicking0.current,
          isSlidable: true
        },
        {
          flicking: flicking1.current,
          isClickable: true,
          activeClass: "active"
        }
      ]
    })]);
  }, []);

  return <Flicking ref={flicking0}
    className="mb-4"
    bounce={30}
    plugins={plugins}>
    <div className="flicking-panel full has-background-primary">
      <img className="panel-image" src="/img/demo/bg01.jpg" />
    </div>
    <div className="flicking-panel full has-background-primary">
      <img className="panel-image" src="/img/demo/bg02.jpg" />
    </div>
    <div className="flicking-panel full has-background-primary">
      <img className="panel-image" src="/img/demo/bg03.jpg" />
    </div>
    <div className="flicking-panel full has-background-primary">
      <img className="panel-image" src="/img/demo/bg04.jpg" />
    </div>
    <div className="flicking-panel full has-background-primary">
      <img className="panel-image" src="/img/demo/bg05.jpg" />
    </div>
    <div className="flicking-panel full has-background-primary">
      <img className="panel-image" src="/img/demo/bg06.jpg" />
    </div>
  </Flicking>
  <Flicking ref={flicking1}
    moveType="freeScroll"
    bound={true}
    bounce={30}>
    <div className="flicking-panel thumb has-background-primary">
      <img className="thumb-image" src="/img/demo/bg01.jpg" />
    </div>
    <div className="flicking-panel thumb has-background-primary">
      <img className="thumb-image" src="/img/demo/bg02.jpg" />
    </div>
    <div className="flicking-panel thumb has-background-primary">
      <img className="thumb-image" src="/img/demo/bg03.jpg" />
    </div>
    <div className="flicking-panel thumb has-background-primary">
      <img className="thumb-image" src="/img/demo/bg04.jpg" />
    </div>
    <div className="flicking-panel thumb has-background-primary">
      <img className="thumb-image" src="/img/demo/bg05.jpg" />
    </div>
    <div className="flicking-panel thumb has-background-primary">
      <img className="thumb-image" src="/img/demo/bg06.jpg" />
    </div>
  </Flicking>
};

<template>
  <div class="wrapper">
    <flicking ref="flicking0" :options="{ bounce: 30 }" :plugins="plugins">
      <div class="flicking-panel full has-background-primary">
        <img class="panel-image" src="/img/demo/bg01.jpg" />
      </div>
      <div class="flicking-panel full has-background-primary">
        <img class="panel-image" src="/img/demo/bg02.jpg" />
      </div>
      <div class="flicking-panel full has-background-primary">
        <img class="panel-image" src="/img/demo/bg03.jpg" />
      </div>
      <div class="flicking-panel full has-background-primary">
        <img class="panel-image" src="/img/demo/bg04.jpg" />
      </div>
      <div class="flicking-panel full has-background-primary">
        <img class="panel-image" src="/img/demo/bg05.jpg" />
      </div>
      <div class="flicking-panel full has-background-primary">
        <img class="panel-image" src="/img/demo/bg06.jpg" />
      </div>
    </flicking>
    <flicking ref="flicking1" :options="{ bound: true, bounce: 30, moveType: 'freeScroll' }">
      <div class="flicking-panel thumb has-background-primary">
        <img class="thumb-image" src="/img/demo/bg01.jpg" />
      </div>
      <div class="flicking-panel thumb has-background-primary">
        <img class="thumb-image" src="/img/demo/bg02.jpg" />
      </div>
      <div class="flicking-panel thumb has-background-primary">
        <img class="thumb-image" src="/img/demo/bg03.jpg" />
      </div>
      <div class="flicking-panel thumb has-background-primary">
        <img class="thumb-image" src="/img/demo/bg04.jpg" />
      </div>
      <div class="flicking-panel thumb has-background-primary">
        <img class="thumb-image" src="/img/demo/bg05.jpg" />
      </div>
      <div class="flicking-panel thumb has-background-primary">
        <img class="thumb-image" src="/img/demo/bg06.jpg" />
      </div>
    </flicking>
  </div>
</template>
<script>
import { Sync } from "@egjs/flicking-plugins";

export default {
  data() {
    return {
      plugins: []
    }
  },
  mounted() {
    this.plugins = [new Sync({
      type: "index",
      synchronizedFlickingOptions: [
        {
          flicking: this.$refs.flicking0,
          isSlidable: true
        },
        {
          flicking: this.$refs.flicking1,
          isClickable: true,
          activeClass: "active"
        }
      ]
    })];
  }
}
</script>

<template>
  <div class="wrapper">
    <flicking ref="flicking0" :options="{ bounce: 30 }" :plugins="plugins">
      <div class="flicking-panel full has-background-primary">
        <img class="panel-image" src="/img/demo/bg01.jpg" />
      </div>
      <div class="flicking-panel full has-background-primary">
        <img class="panel-image" src="/img/demo/bg02.jpg" />
      </div>
      <div class="flicking-panel full has-background-primary">
        <img class="panel-image" src="/img/demo/bg03.jpg" />
      </div>
      <div class="flicking-panel full has-background-primary">
        <img class="panel-image" src="/img/demo/bg04.jpg" />
      </div>
      <div class="flicking-panel full has-background-primary">
        <img class="panel-image" src="/img/demo/bg05.jpg" />
      </div>
      <div class="flicking-panel full has-background-primary">
        <img class="panel-image" src="/img/demo/bg06.jpg" />
      </div>
    </flicking>
    <flicking ref="flicking1" :options="{ bound: true, bounce: 30, moveType: 'freeScroll' }">
      <div class="flicking-panel thumb has-background-primary">
        <img class="thumb-image" src="/img/demo/bg01.jpg" />
      </div>
      <div class="flicking-panel thumb has-background-primary">
        <img class="thumb-image" src="/img/demo/bg02.jpg" />
      </div>
      <div class="flicking-panel thumb has-background-primary">
        <img class="thumb-image" src="/img/demo/bg03.jpg" />
      </div>
      <div class="flicking-panel thumb has-background-primary">
        <img class="thumb-image" src="/img/demo/bg04.jpg" />
      </div>
      <div class="flicking-panel thumb has-background-primary">
        <img class="thumb-image" src="/img/demo/bg05.jpg" />
      </div>
      <div class="flicking-panel thumb has-background-primary">
        <img class="thumb-image" src="/img/demo/bg06.jpg" />
      </div>
    </flicking>
  </div>
</template>
<script>
import { Sync } from "@egjs/flicking-plugins";

export default {
  data() {
    return {
      plugins: []
    }
  },
  mounted() {
    this.plugins = [new Sync({
      type: "index",
      synchronizedFlickingOptions: [
        {
          flicking: this.$refs.flicking0,
          isSlidable: true
        },
        {
          flicking: this.$refs.flicking1,
          isClickable: true,
          activeClass: "active"
        }
      ]
    })];
  }
}
</script>

app.component.html
<ngx-flicking #flicking0 [options]="{ bounce: 30 }" [plugins]="plugins">
  <div class="flicking-panel full has-background-primary">
    <img class="panel-image" src="/img/demo/bg01.jpg" />
  </div>
  <div class="flicking-panel full has-background-primary">
    <img class="panel-image" src="/img/demo/bg02.jpg" />
  </div>
  <div class="flicking-panel full has-background-primary">
    <img class="panel-image" src="/img/demo/bg03.jpg" />
  </div>
  <div class="flicking-panel full has-background-primary">
    <img class="panel-image" src="/img/demo/bg04.jpg" />
  </div>
  <div class="flicking-panel full has-background-primary">
    <img class="panel-image" src="/img/demo/bg05.jpg" />
  </div>
  <div class="flicking-panel full has-background-primary">
    <img class="panel-image" src="/img/demo/bg06.jpg" />
  </div>
</ngx-flicking>
<ngx-flicking #flicking1 [options]="{ bound: true, bounce: 30, moveType: 'freeScroll' }">
  <div class="flicking-panel thumb has-background-primary">
    <img class="thumb-image" src="/img/demo/bg01.jpg" />
  </div>
  <div class="flicking-panel thumb has-background-primary">
    <img class="thumb-image" src="/img/demo/bg02.jpg" />
  </div>
  <div class="flicking-panel thumb has-background-primary">
    <img class="thumb-image" src="/img/demo/bg03.jpg" />
  </div>
  <div class="flicking-panel thumb has-background-primary">
    <img class="thumb-image" src="/img/demo/bg04.jpg" />
  </div>
  <div class="flicking-panel thumb has-background-primary">
    <img class="thumb-image" src="/img/demo/bg05.jpg" />
  </div>
  <div class="flicking-panel thumb has-background-primary">
    <img class="thumb-image" src="/img/demo/bg06.jpg" />
  </div>
</ngx-flicking>

app.component.ts
import { Component, OnInit, ViewChild } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Sync } from "@egjs/flicking-plugins";

@Component({})
export class DemoComponent {
  @ViewChild("flicking0", { static: true }) flicking0: NgxFlickingComponent;
  @ViewChild("flicking1", { static: true }) flicking1: NgxFlickingComponent;

  public plugins: Plugin[] = [];

  public ngOnInit() {
    this.plugins = [new Sync({
      type: "index",
      synchronizedFlickingOptions: [
        {
          flicking: this.flicking0,
          isSlidable: true
        },
        {
          flicking: this.flicking1,
          isClickable: true,
          activeClass: "active"
        }
      ]
    })]
  }
}

export default () => {
  const flicking0 = useRef();
  const flicking1 = useRef();

  const [plugins, setPlugins] = useState([]);

  useEffect(() => {
    setPlugins([new Sync({
      type: "index",
      synchronizedFlickingOptions: [
        {
          flicking: flicking0.current,
          isSlidable: true
        },
        {
          flicking: flicking1.current,
          isClickable: true,
          activeClass: "active"
        }
      ]
    })]);
  }, []);

  return <Flicking ref={flicking0}
    className="mb-4"
    bounce={30}
    plugins={plugins}>
    <div className="flicking-panel full has-background-primary">
      <img className="panel-image" src="/img/demo/bg01.jpg" />
    </div>
    <div className="flicking-panel full has-background-primary">
      <img className="panel-image" src="/img/demo/bg02.jpg" />
    </div>
    <div className="flicking-panel full has-background-primary">
      <img className="panel-image" src="/img/demo/bg03.jpg" />
    </div>
    <div className="flicking-panel full has-background-primary">
      <img className="panel-image" src="/img/demo/bg04.jpg" />
    </div>
    <div className="flicking-panel full has-background-primary">
      <img className="panel-image" src="/img/demo/bg05.jpg" />
    </div>
    <div className="flicking-panel full has-background-primary">
      <img className="panel-image" src="/img/demo/bg06.jpg" />
    </div>
  </Flicking>
  <Flicking ref={flicking1}
    moveType="freeScroll"
    bound={true}
    bounce={30}>
    <div className="flicking-panel thumb has-background-primary">
      <img className="thumb-image" src="/img/demo/bg01.jpg" />
    </div>
    <div className="flicking-panel thumb has-background-primary">
      <img className="thumb-image" src="/img/demo/bg02.jpg" />
    </div>
    <div className="flicking-panel thumb has-background-primary">
      <img className="thumb-image" src="/img/demo/bg03.jpg" />
    </div>
    <div className="flicking-panel thumb has-background-primary">
      <img className="thumb-image" src="/img/demo/bg04.jpg" />
    </div>
    <div className="flicking-panel thumb has-background-primary">
      <img className="thumb-image" src="/img/demo/bg05.jpg" />
    </div>
    <div className="flicking-panel thumb has-background-primary">
      <img className="thumb-image" src="/img/demo/bg06.jpg" />
    </div>
  </Flicking>
};

<script>
  import { onMount } from "svelte";
  import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
  import { Sync } from "@egjs/flicking-plugins";
  import "@egjs/svelte-flicking/dist/flicking.css";

  let flicking0;
  let flicking1;

  let plugins = [];

  onMount(() => {
    plugins = [new Sync({
      type: "index",
      synchronizedFlickingOptions: [
        {
          flicking: flicking0.vanillaFlicking,
          isSlidable: true
        },
        {
          flicking: flicking1.vanillaFlicking,
          isClickable: true,
          activeClass: "active"
        }
      ]
    })];
  });
</script>

<Flicking bind:this={flicking0} class="mb-4"
  options={{ bounce: 30 }}
  plugins={plugins}>
  <FlickingPanel class="flicking-panel full has-background-primary">
    <img class="panel-image" src="/img/demo/bg01.jpg" />
  </FlickingPanel>
  <FlickingPanel class="flicking-panel full has-background-primary">
    <img class="panel-image" src="/img/demo/bg02.jpg" />
  </FlickingPanel>
  <FlickingPanel class="flicking-panel full has-background-primary">
    <img class="panel-image" src="/img/demo/bg03.jpg" />
  </FlickingPanel>
  <FlickingPanel class="flicking-panel full has-background-primary">
    <img class="panel-image" src="/img/demo/bg04.jpg" />
  </FlickingPanel>
  <FlickingPanel class="flicking-panel full has-background-primary">
    <img class="panel-image" src="/img/demo/bg05.jpg" />
  </FlickingPanel>
  <FlickingPanel class="flicking-panel full has-background-primary">
    <img class="panel-image" src="/img/demo/bg06.jpg" />
  </FlickingPanel>
</Flicking>
<Flicking bind:this={flicking1}
  options={{ moveType: "freeScroll", bound: true, bounce: 30 }}>
  <FlickingPanel class="flicking-panel thumb has-background-primary">
    <img class="thumb-image" src="/img/demo/bg01.jpg" />
  </FlickingPanel>
  <FlickingPanel class="flicking-panel thumb has-background-primary">
    <img class="thumb-image" src="/img/demo/bg02.jpg" />
  </FlickingPanel>
  <FlickingPanel class="flicking-panel thumb has-background-primary">
    <img class="thumb-image" src="/img/demo/bg03.jpg" />
  </FlickingPanel>
  <FlickingPanel class="flicking-panel thumb has-background-primary">
    <img class="thumb-image" src="/img/demo/bg04.jpg" />
  </FlickingPanel>
  <FlickingPanel class="flicking-panel thumb has-background-primary">
    <img class="thumb-image" src="/img/demo/bg05.jpg" />
  </FlickingPanel>
  <FlickingPanel class="flicking-panel thumb has-background-primary">
    <img class="thumb-image" src="/img/demo/bg06.jpg" />
  </FlickingPanel>
</Flicking>

Options

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
type	"camera" \| "index"	✔️	"camera"	Types of methods to synchronize between Flickings. `"camera"` will sync by camera position, and `"index"` will sync by panel index
synchronizedFlickingOptions	Array<{flicking: Flicking, isClickable: boolean, isSlidable: boolean, activeClass: string}>	✔️	[]	Detailed options for syncing Flickings
synchronizedFlickingOptions[].flicking	Flicking			An instance of Flicking to sync
synchronizedFlickingOptions[].isClickable	boolean	✔️	false	By enabling this option, clicking the given Flicking's panel will change the given & other Flicking's index
synchronizedFlickingOptions[].isSlidable	boolean	✔️	false	By enabling this option, the given Flicking's scroll with mouse/touch input will change other Flicking's index. Only available for the `index` type
synchronizedFlickingOptions[].activeClass	string	✔️		An extra class for the panels when selected

Perspective

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="card-panel is-small"><span class="flicking-index">1</span></div>
    <div class="card-panel is-small"><span class="flicking-index">2</span></div>
    <div class="card-panel is-small"><span class="flicking-index">3</span></div>
    <div class="card-panel is-small"><span class="flicking-index">4</span></div>
    <div class="card-panel is-small"><span class="flicking-index">5</span></div>
    <div class="card-panel is-small"><span class="flicking-index">6</span></div>
  </div>
</div>

js
import Flicking from "@egjs/flicking";
import { Perspective } from "@egjs/flicking-plugins";

const flicking = new Flicking("#flick", {
  circular: true
});

flicking.addPlugins(new Perspective({
  rotate: 0.5
}));

DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";
import { Perspective } from "@egjs/flicking-plugins";

export default class DemoComponent extends Component {
  private _plugins = [new Perspective({ rotate: 0.5 })];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel is-small"><span className="flicking-index">1</span></div>
      <div className="card-panel is-small"><span className="flicking-index">2</span></div>
      <div className="card-panel is-small"><span className="flicking-index">3</span></div>
      <div className="card-panel is-small"><span className="flicking-index">4</span></div>
      <div className="card-panel is-small"><span className="flicking-index">5</span></div>
      <div className="card-panel is-small"><span className="flicking-index">6</span></div>
    </Flicking>;
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel is-small"><span class="flicking-index">1</span></div>
  <div class="card-panel is-small"><span class="flicking-index">2</span></div>
  <div class="card-panel is-small"><span class="flicking-index">3</span></div>
  <div class="card-panel is-small"><span class="flicking-index">4</span></div>
  <div class="card-panel is-small"><span class="flicking-index">5</span></div>
  <div class="card-panel is-small"><span class="flicking-index">6</span></div>
</Flicking>

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

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Perspective({ rotate: 0.5 })]
    }
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel is-small"><span class="flicking-index">1</span></div>
  <div class="card-panel is-small"><span class="flicking-index">2</span></div>
  <div class="card-panel is-small"><span class="flicking-index">3</span></div>
  <div class="card-panel is-small"><span class="flicking-index">4</span></div>
  <div class="card-panel is-small"><span class="flicking-index">5</span></div>
  <div class="card-panel is-small"><span class="flicking-index">6</span></div>
</Flicking>

script
import Flicking from "@egjs/vue3-flicking";
import { Perspective } from "@egjs/flicking-plugins";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Perspective({ rotate: 0.5 })]
    }
  }
}

demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
  <div flicking-panel class="card-panel is-small"><span class="flicking-index">1</span></div>
  <div flicking-panel class="card-panel is-small"><span class="flicking-index">2</span></div>
  <div flicking-panel class="card-panel is-small"><span class="flicking-index">3</span></div>
  <div flicking-panel class="card-panel is-small"><span class="flicking-index">4</span></div>
  <div flicking-panel class="card-panel is-small"><span class="flicking-index">5</span></div>
  <div flicking-panel class="card-panel is-small"><span class="flicking-index">6</span></div>
</ngx-flicking>

demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Perspective } from "@egjs/flicking-plugins";

@Component({
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  public plugins: Plugin[] = [new Perspective({ rotate: 0.5 })];
}

DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";
import { Perspective } from "@egjs/flicking-plugins";

export default class DemoComponent extends Component {
  private _plugins = [new Perspective({ rotate: 0.5 })];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel is-small"><span className="flicking-index">1</span></div>
      <div className="card-panel is-small"><span className="flicking-index">2</span></div>
      <div className="card-panel is-small"><span className="flicking-index">3</span></div>
      <div className="card-panel is-small"><span className="flicking-index">4</span></div>
      <div className="card-panel is-small"><span className="flicking-index">5</span></div>
      <div className="card-panel is-small"><span className="flicking-index">6</span></div>
    </Flicking>;
  }
}

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Perspective } from "@egjs/flicking-plugins";

const plugins = [new Perspective({ rotate: 0.5 })];
</script>

<Flicking options={{ circular: true }} plugins={plugins}>
  <FlickingPanel class="card-panel is-small"><span class="flicking-index">1</span></FlickingPanel>
  <FlickingPanel class="card-panel is-small"><span class="flicking-index">2</span></FlickingPanel>
  <FlickingPanel class="card-panel is-small"><span class="flicking-index">3</span></FlickingPanel>
  <FlickingPanel class="card-panel is-small"><span class="flicking-index">4</span></FlickingPanel>
  <FlickingPanel class="card-panel is-small"><span class="flicking-index">5</span></FlickingPanel>
  <FlickingPanel class="card-panel is-small"><span class="flicking-index">6</span></FlickingPanel>
</Flicking>

style
.card-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  box-shadow: 0 0.5em 1em -0.125em rgba(10.2, 10.2, 10.2, 0.1);
  max-width: 100%;
  font-size: 3rem;
  margin: 0.5rem;
  width: 50%;
  height: 200px;
  padding: 30px 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.is-small {
  width: 33%;
}

.flicking-index {
  position: relative;
  min-width: 60px;
  text-align: center;
}

.flicking-index::after {
  position: absolute;
  content: "PANEL";
  font-weight: bold;
  left: 0;
  bottom: -1.2rem;
  width: 100%;
  text-align: center;
  font-size: 1rem;
}

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="card-panel is-small"><span class="flicking-index">1</span></div>
    <div class="card-panel is-small"><span class="flicking-index">2</span></div>
    <div class="card-panel is-small"><span class="flicking-index">3</span></div>
    <div class="card-panel is-small"><span class="flicking-index">4</span></div>
    <div class="card-panel is-small"><span class="flicking-index">5</span></div>
    <div class="card-panel is-small"><span class="flicking-index">6</span></div>
  </div>
</div>

js
import Flicking from "@egjs/flicking";
import { Perspective } from "@egjs/flicking-plugins";

const flicking = new Flicking("#flick", {
  circular: true
});

flicking.addPlugins(new Perspective({
  rotate: -1,
  scale: 2,
  perspective: 600
}));

DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";
import { Perspective } from "@egjs/flicking-plugins";

export default class DemoComponent extends Component {
  private _plugins = [new Perspective({ rotate: -1, scale: 2, perspective: 600 })];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel is-small"><span className="flicking-index">1</span></div>
      <div className="card-panel is-small"><span className="flicking-index">2</span></div>
      <div className="card-panel is-small"><span className="flicking-index">3</span></div>
      <div className="card-panel is-small"><span className="flicking-index">4</span></div>
      <div className="card-panel is-small"><span className="flicking-index">5</span></div>
      <div className="card-panel is-small"><span className="flicking-index">6</span></div>
    </Flicking>;
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel is-small"><span class="flicking-index">1</span></div>
  <div class="card-panel is-small"><span class="flicking-index">2</span></div>
  <div class="card-panel is-small"><span class="flicking-index">3</span></div>
  <div class="card-panel is-small"><span class="flicking-index">4</span></div>
  <div class="card-panel is-small"><span class="flicking-index">5</span></div>
  <div class="card-panel is-small"><span class="flicking-index">6</span></div>
</Flicking>

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

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Perspective({ rotate: -1, scale: 2, perspective: 600 })]
    }
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel is-small"><span class="flicking-index">1</span></div>
  <div class="card-panel is-small"><span class="flicking-index">2</span></div>
  <div class="card-panel is-small"><span class="flicking-index">3</span></div>
  <div class="card-panel is-small"><span class="flicking-index">4</span></div>
  <div class="card-panel is-small"><span class="flicking-index">5</span></div>
  <div class="card-panel is-small"><span class="flicking-index">6</span></div>
</Flicking>

script
import Flicking from "@egjs/vue3-flicking";
import { Perspective } from "@egjs/flicking-plugins";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Perspective({ rotate: -1, scale: 2, perspective: 600 })]
    }
  }
}

demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
  <div flicking-panel class="card-panel is-small"><span class="flicking-index">1</span></div>
  <div flicking-panel class="card-panel is-small"><span class="flicking-index">2</span></div>
  <div flicking-panel class="card-panel is-small"><span class="flicking-index">3</span></div>
  <div flicking-panel class="card-panel is-small"><span class="flicking-index">4</span></div>
  <div flicking-panel class="card-panel is-small"><span class="flicking-index">5</span></div>
  <div flicking-panel class="card-panel is-small"><span class="flicking-index">6</span></div>
</ngx-flicking>

demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Perspective } from "@egjs/flicking-plugins";

@Component({
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  public plugins: Plugin[] = [new Perspective({ rotate: -1, scale: 2, perspective: 600 })];
}

DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";
import { Perspective } from "@egjs/flicking-plugins";

export default class DemoComponent extends Component {
  private _plugins = [new Perspective({ rotate: -1, scale: 2, perspective: 600 })];

  public render() {
    return <Flicking circular={true} plugins={this._plugins}>
      <div className="card-panel is-small"><span className="flicking-index">1</span></div>
      <div className="card-panel is-small"><span className="flicking-index">2</span></div>
      <div className="card-panel is-small"><span className="flicking-index">3</span></div>
      <div className="card-panel is-small"><span className="flicking-index">4</span></div>
      <div className="card-panel is-small"><span className="flicking-index">5</span></div>
      <div className="card-panel is-small"><span className="flicking-index">6</span></div>
    </Flicking>;
  }
}

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Perspective } from "@egjs/flicking-plugins";

const plugins = [new Perspective({ rotate: -1, scale: 2, perspective: 600 })];
</script>

<Flicking options={{ circular: true }} plugins={plugins}>
  <FlickingPanel class="card-panel is-small"><span class="flicking-index">1</span></FlickingPanel>
  <FlickingPanel class="card-panel is-small"><span class="flicking-index">2</span></FlickingPanel>
  <FlickingPanel class="card-panel is-small"><span class="flicking-index">3</span></FlickingPanel>
  <FlickingPanel class="card-panel is-small"><span class="flicking-index">4</span></FlickingPanel>
  <FlickingPanel class="card-panel is-small"><span class="flicking-index">5</span></FlickingPanel>
  <FlickingPanel class="card-panel is-small"><span class="flicking-index">6</span></FlickingPanel>
</Flicking>

Options

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
selector	string	✔️	""	The selector of the element to which the perspective effect is to be applied. If the selector is blank, it applies to panel element.
scale	number	✔️	1	Effect amplication scale.
rotate	number	✔️	1	Effect amplication rotate.
perspective	number	✔️	1000	The value of perspective CSS property.

Plugins

How to use​

Autoplay​

Options​

Parallax​

Options​

Fade​

Options​

Arrow​

Options​

Pagination​

Options​

Sync​

Options​

Perspective​

Options​

How to use

Autoplay

Options

Parallax

Options

Fade

Options

Arrow

Options

Pagination

Options

Sync

Options

Perspective

Options