Skip to main content

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 }));
info

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsobject✔️{}Options for the AutoPlay instance
options.durationnumber✔️2000Time to wait before moving on to the next panel
options.animationDurationnumber | undefined✔️undefinedDuration 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.stopOnHoverboolean✔️falseWhether to stop when mouse hover upon the element
options.delayAfterHovernumber✔️options.durationIf stopOnHover is true, the amount of time to wait before moving on to the next panel when mouse leaves the element

Parallax

Options

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
selectorstring✔️""Selector of the element to apply parallax effect
scalenumber✔️1Effect amplication scale

Fade

Options

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
selectorstring✔️""The selector of the element to which the fade effect is to be applied. If the selector is blank, it applies to panel element
scalenumber✔️1Effect amplication scale

Arrow

1
2
3
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());
1
2
3
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());
1
2
3
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());
1
2
3
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());

Options

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
parentElHTMLElement | null✔️nullThe parent element to query prevElSelector and nextElSelector. If null is given, it will search the element inside wrapper element(.flicking-viewport) of Flicking.
prevElSelectorstring✔️".flicking-arrow-prev"CSS selector to find query the prev arrow element
nextElSelectorstring✔️".flicking-arrow-next"CSS selector to find query the next arrow element
disabledClassstring✔️"flicking-arrow-disabled"A class to apply when Flicking reachs edge
moveCountnumber✔️1A number of skipping panels with one click
moveByViewportSizeboolean✔️falseEffective for "freeScroll" moveType, enabling this will scroll camera by the size of viewport per click

Pagination

1
2
3
4
5
6
7
8
9
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"
}));
1
2
3
4
5
6
7
8
9
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"
}));
1
2
3
4
5
6
7
8
9
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"
}));

Options

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
parentElHTMLElement | null✔️nullThe parent element to query selector. If null is given, it will search the element inside wrapper element(.flicking-viewport) of Flicking.
selectorstring✔️".flicking-pagination"CSS selector to find query the pagination element
type"bullet" | "fraction" | "scroll"✔️"bullet"A style of pagination to apply
classPrefixstring✔️"flicking-pagination"A class prefix for automatically generated elements
bulletCountnumber✔️5A number of visual bullets when "scroll" type is chosen
renderBulletfunction✔️(className: string) => `<span class="${className}"></span>`A render function for bullets, effective for "bullet" and "scroll" type
renderActiveBulletfunction | null✔️nullA render function for the active(selected) bullet, effective for "bullet" and "scroll" type.
If null is given, renderBullet will be used instead.
renderFractionfunction✔️(currentClass: string, totalClass: string) => `<span class="${currentClass}"></span>/<span class="${totalClass}"></span>`A render function for fraction, effective for "fration" type
fractionCurrentFormatfunction✔️(index: number) => index.toString()A format to display a current index inside fraction-current class
fractionTotalFormatfunction✔️(index: number) => index.toString()A format to display a total panels count inside fraction-total class
scrollOnChangefunction✔️(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
}
]
}));
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"
}
]
}));

Options

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
type"camera" | "index"✔️"camera"Types of methods to synchronize between Flickings. "camera" will sync by camera position, and "index" will sync by panel index
synchronizedFlickingOptionsArray<{flicking: Flicking, isClickable: boolean, isSlidable: boolean, activeClass: string}>✔️[]Detailed options for syncing Flickings
synchronizedFlickingOptions[].flickingFlickingAn instance of Flicking to sync
synchronizedFlickingOptions[].isClickableboolean✔️falseBy enabling this option, clicking the given Flicking's panel will change the given & other Flicking's index
synchronizedFlickingOptions[].isSlidableboolean✔️falseBy 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[].activeClassstring✔️An extra class for the panels when selected

Perspective

1
2
3
4
5
6
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
}));
1
2
3
4
5
6
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
}));

Options

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
selectorstring✔️""The selector of the element to which the perspective effect is to be applied. If the selector is blank, it applies to panel element.
scalenumber✔️1Effect amplication scale.
rotatenumber✔️1Effect amplication rotate.
perspectivenumber✔️1000The value of perspective CSS property.