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

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

Options

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

Fade

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">1</div>
    <div class="card-panel">2</div>
    <div class="card-panel">3</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</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">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</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">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</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">1</div>
  <div flicking-panel class="card-panel">2</div>
  <div flicking-panel class="card-panel">3</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</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">1</FlickingPanel>
  <FlickingPanel class="card-panel">2</FlickingPanel>
  <FlickingPanel class="card-panel">3</FlickingPanel>
  <svelte:fragment slot="viewport">
    <span class="flicking-arrow-prev"></span>
    <span class="flicking-arrow-next"></span>
  </svelte:fragment>
</Flicking>

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="card-panel">1</div>
    <div class="card-panel">2</div>
    <div class="card-panel">3</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</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">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</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">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</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">1</div>
  <div flicking-panel class="card-panel">2</div>
  <div flicking-panel class="card-panel">3</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</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">1</FlickingPanel>
  <FlickingPanel class="card-panel">2</FlickingPanel>
  <FlickingPanel class="card-panel">3</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">1</div>
    <div class="card-panel">2</div>
    <div class="card-panel">3</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</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">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</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">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</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">1</div>
  <div flicking-panel class="card-panel">2</div>
  <div flicking-panel class="card-panel">3</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</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">1</FlickingPanel>
  <FlickingPanel class="card-panel">2</FlickingPanel>
  <FlickingPanel class="card-panel">3</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">1</div>
    <div class="card-panel">2</div>
    <div class="card-panel">3</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</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">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</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">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</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">1</div>
  <div flicking-panel class="card-panel">2</div>
  <div flicking-panel class="card-panel">3</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</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">1</FlickingPanel>
  <FlickingPanel class="card-panel">2</FlickingPanel>
  <FlickingPanel class="card-panel">3</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">1</div>
    <div class="card-panel">2</div>
    <div class="card-panel">3</div>
    <div class="card-panel">4</div>
    <div class="card-panel">5</div>
    <div class="card-panel">6</div>
    <div class="card-panel">7</div>
    <div class="card-panel">8</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</div>
      <div className="card-panel">4</div>
      <div className="card-panel">5</div>
      <div className="card-panel">6</div>
      <div className="card-panel">7</div>
      <div className="card-panel">8</div>
      <ViewportSlot>
        <div className="flicking-pagination"></div>
      </ViewportSlot>
    </Flicking>;
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</div>
  <div class="card-panel">4</div>
  <div class="card-panel">5</div>
  <div class="card-panel">6</div>
  <div class="card-panel">7</div>
  <div class="card-panel">8</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">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</div>
  <div class="card-panel">4</div>
  <div class="card-panel">5</div>
  <div class="card-panel">6</div>
  <div class="card-panel">7</div>
  <div class="card-panel">8</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">1</div>
  <div flicking-panel class="card-panel">2</div>
  <div flicking-panel class="card-panel">3</div>
  <div flicking-panel class="card-panel">4</div>
  <div flicking-panel class="card-panel">5</div>
  <div flicking-panel class="card-panel">6</div>
  <div flicking-panel class="card-panel">7</div>
  <div flicking-panel class="card-panel">8</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</div>
      <div className="card-panel">4</div>
      <div className="card-panel">5</div>
      <div className="card-panel">6</div>
      <div className="card-panel">7</div>
      <div className="card-panel">8</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">1</FlickingPanel>
  <FlickingPanel class="card-panel">2</FlickingPanel>
  <FlickingPanel class="card-panel">3</FlickingPanel>
  <FlickingPanel class="card-panel">4</FlickingPanel>
  <FlickingPanel class="card-panel">5</FlickingPanel>
  <FlickingPanel class="card-panel">6</FlickingPanel>
  <FlickingPanel class="card-panel">7</FlickingPanel>
  <FlickingPanel class="card-panel">8</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">1</div>
    <div class="card-panel">2</div>
    <div class="card-panel">3</div>
    <div class="card-panel">4</div>
    <div class="card-panel">5</div>
    <div class="card-panel">6</div>
    <div class="card-panel">7</div>
    <div class="card-panel">8</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</div>
      <div className="card-panel">4</div>
      <div className="card-panel">5</div>
      <div className="card-panel">6</div>
      <div className="card-panel">7</div>
      <div className="card-panel">8</div>
      <ViewportSlot>
        <div className="flicking-pagination"></div>
      </ViewportSlot>
    </Flicking>;
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</div>
  <div class="card-panel">4</div>
  <div class="card-panel">5</div>
  <div class="card-panel">6</div>
  <div class="card-panel">7</div>
  <div class="card-panel">8</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">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</div>
  <div class="card-panel">4</div>
  <div class="card-panel">5</div>
  <div class="card-panel">6</div>
  <div class="card-panel">7</div>
  <div class="card-panel">8</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">1</div>
  <div flicking-panel class="card-panel">2</div>
  <div flicking-panel class="card-panel">3</div>
  <div flicking-panel class="card-panel">4</div>
  <div flicking-panel class="card-panel">5</div>
  <div flicking-panel class="card-panel">6</div>
  <div flicking-panel class="card-panel">7</div>
  <div flicking-panel class="card-panel">8</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</div>
      <div className="card-panel">4</div>
      <div className="card-panel">5</div>
      <div className="card-panel">6</div>
      <div className="card-panel">7</div>
      <div className="card-panel">8</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">1</FlickingPanel>
  <FlickingPanel class="card-panel">2</FlickingPanel>
  <FlickingPanel class="card-panel">3</FlickingPanel>
  <FlickingPanel class="card-panel">4</FlickingPanel>
  <FlickingPanel class="card-panel">5</FlickingPanel>
  <FlickingPanel class="card-panel">6</FlickingPanel>
  <FlickingPanel class="card-panel">7</FlickingPanel>
  <FlickingPanel class="card-panel">8</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">1</div>
    <div class="card-panel">2</div>
    <div class="card-panel">3</div>
    <div class="card-panel">4</div>
    <div class="card-panel">5</div>
    <div class="card-panel">6</div>
    <div class="card-panel">7</div>
    <div class="card-panel">8</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</div>
      <div className="card-panel">4</div>
      <div className="card-panel">5</div>
      <div className="card-panel">6</div>
      <div className="card-panel">7</div>
      <div className="card-panel">8</div>
      <ViewportSlot>
        <div className="flicking-pagination"></div>
      </ViewportSlot>
    </Flicking>;
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</div>
  <div class="card-panel">4</div>
  <div class="card-panel">5</div>
  <div class="card-panel">6</div>
  <div class="card-panel">7</div>
  <div class="card-panel">8</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">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</div>
  <div class="card-panel">4</div>
  <div class="card-panel">5</div>
  <div class="card-panel">6</div>
  <div class="card-panel">7</div>
  <div class="card-panel">8</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">1</div>
  <div flicking-panel class="card-panel">2</div>
  <div flicking-panel class="card-panel">3</div>
  <div flicking-panel class="card-panel">4</div>
  <div flicking-panel class="card-panel">5</div>
  <div flicking-panel class="card-panel">6</div>
  <div flicking-panel class="card-panel">7</div>
  <div flicking-panel class="card-panel">8</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</div>
      <div className="card-panel">4</div>
      <div className="card-panel">5</div>
      <div className="card-panel">6</div>
      <div className="card-panel">7</div>
      <div className="card-panel">8</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">1</FlickingPanel>
  <FlickingPanel class="card-panel">2</FlickingPanel>
  <FlickingPanel class="card-panel">3</FlickingPanel>
  <FlickingPanel class="card-panel">4</FlickingPanel>
  <FlickingPanel class="card-panel">5</FlickingPanel>
  <FlickingPanel class="card-panel">6</FlickingPanel>
  <FlickingPanel class="card-panel">7</FlickingPanel>
  <FlickingPanel class="card-panel">8</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">1</div>
    <div class="card-panel">2</div>
    <div class="card-panel">3</div>
    <div class="card-panel">4</div>
    <div class="card-panel">5</div>
    <div class="card-panel">6</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</div>
      <div className="card-panel">4</div>
      <div className="card-panel">5</div>
      <div className="card-panel">6</div>
    </Flicking>;
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</div>
  <div class="card-panel">4</div>
  <div class="card-panel">5</div>
  <div class="card-panel">6</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">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</div>
  <div class="card-panel">4</div>
  <div class="card-panel">5</div>
  <div class="card-panel">6</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">1</div>
  <div flicking-panel class="card-panel">2</div>
  <div flicking-panel class="card-panel">3</div>
  <div flicking-panel class="card-panel">4</div>
  <div flicking-panel class="card-panel">5</div>
  <div flicking-panel class="card-panel">6</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</div>
      <div className="card-panel">4</div>
      <div className="card-panel">5</div>
      <div className="card-panel">6</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">1</FlickingPanel>
  <FlickingPanel class="card-panel">2</FlickingPanel>
  <FlickingPanel class="card-panel">3</FlickingPanel>
  <FlickingPanel class="card-panel">4</FlickingPanel>
  <FlickingPanel class="card-panel">5</FlickingPanel>
  <FlickingPanel class="card-panel">6</FlickingPanel>
</Flicking>

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="card-panel">1</div>
    <div class="card-panel">2</div>
    <div class="card-panel">3</div>
    <div class="card-panel">4</div>
    <div class="card-panel">5</div>
    <div class="card-panel">6</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</div>
      <div className="card-panel">4</div>
      <div className="card-panel">5</div>
      <div className="card-panel">6</div>
    </Flicking>;
  }
}

template
<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</div>
  <div class="card-panel">4</div>
  <div class="card-panel">5</div>
  <div class="card-panel">6</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">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</div>
  <div class="card-panel">4</div>
  <div class="card-panel">5</div>
  <div class="card-panel">6</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">1</div>
  <div flicking-panel class="card-panel">2</div>
  <div flicking-panel class="card-panel">3</div>
  <div flicking-panel class="card-panel">4</div>
  <div flicking-panel class="card-panel">5</div>
  <div flicking-panel class="card-panel">6</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">1</div>
      <div className="card-panel">2</div>
      <div className="card-panel">3</div>
      <div className="card-panel">4</div>
      <div className="card-panel">5</div>
      <div className="card-panel">6</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">1</FlickingPanel>
  <FlickingPanel class="card-panel">2</FlickingPanel>
  <FlickingPanel class="card-panel">3</FlickingPanel>
  <FlickingPanel class="card-panel">4</FlickingPanel>
  <FlickingPanel class="card-panel">5</FlickingPanel>
  <FlickingPanel class="card-panel">6</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