Version: 4.4.2

Flicking

class Flicking extends Component

Constructor

new Flicking(root, options)

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
root	HTMLElement \| string			A root HTMLElement to initialize Flicking on it. When it's a typeof `string`, it should be a css selector string
options	object	✔️	{}	An options object for Flicking.

Properties

VERSION

staticreadonly

Version info string

Type: string

Flicking.VERSION;  // ex) 4.0.0

control

readonly

Control instance of the Flicking

Type: Control

Default: SnapControl

See:

camera

readonly

Camera instance of the Flicking

Type: Camera

Default: LinearCamera

See:

renderer

readonly

Renderer instance of the Flicking

Type: Renderer

Default: VanillaRenderer

See:

viewport

readonly

A component that manages viewport size

Type: Viewport

See:

Viewport

initialized

readonly

Whether Flicking's init() is called.
This is true when init() is called, and is false after calling destroy().

Type: boolean

Default: false

circularEnabled

readonly

Whether the circular option is enabled.
The circular option can't be enabled when sum of the panel sizes are too small.

Type: boolean

Default: false

virtualEnabled

readonly

Whether the virtual option is enabled.
The virtual option can't be enabled when panelsPerView is less or equal than zero.

Type: boolean

Default: false

index

readonly

Index number of the currentPanel

Type: number

Default: 0

element

readonly

The root(.flicking-viewport) element

Type: HTMLElement

currentPanel

readonly

Currently active panel

Type: Panel

See:

Panel

panels

readonly

Array of panels

Type: Array<Panel>

See:

Panel

panelCount

readonly

Count of panels

Type: number

visiblePanels

readonly

Array of panels that is visible at the current position

Type: Array<Panel>

See:

Panel

animating

readonly

Whether Flicking's animating

Type: boolean

holding

readonly

Whether user is clicking or touching

Type: boolean

activePlugins

readonly

A current list of activated plugins

Type: Array<Plugin>

align

Align position of the panels within viewport. You can set different values each for the panel and camera

Type: ALIGN | string | number | Object

Default: "center"

PROPERTY	TYPE	DESCRIPTION
panel	ALIGN \| string \| number	The align value for each Panels
camera	ALIGN \| string \| number	The align value for Camera

const possibleOptions = [
  // Literal strings
  "prev", "center", "next",
  // % values, applied to both panel & camera
  "0%", "25%", "42%",
  // px values, arithmetic calculation with (+/-) is also allowed.
  "0px", "100px", "50% - 25px",
  // numbers, same to number + px ("0px", "100px")
  0, 100, 1000,
  // Setting a different value for panel & camera
  { panel: "10%", camera: "25%" }
];

possibleOptions.forEach(align => {
  new Flicking("#el", { align });
});

defaultIndex

Index of the panel to move when Flicking's init() is called. A zero-based integer

Type: number

Default: 0

horizontal

Direction of panel movement (true: horizontal, false: vertical)

Type: boolean

Default: true

circular

Enables circular(continuous loop) mode, which connects first/last panel for continuous scrolling.

Type: boolean

Default: false

bound

Prevent the view(camera element) from going out of the first/last panel, so it won't show empty spaces before/after the first/last panel
Only can be enabled when circular=false

Type: boolean

Default: false

adaptive

Update height of the viewport element after movement same to the height of the panel below. This can be only enabled when horizontal=true

Type: boolean

Default: false

panelsPerView

A visible number of panels on viewport. Enabling this option will automatically resize panel size

Type: number

Default: -1

noPanelStyleOverride

Enabling this option will not change width/height style of the panels if Flicking#panelsPerView is enabled.
This behavior can be useful in terms of performance when you're manually managing all panel sizes

Type: boolean

Default: false

resizeOnContentsReady

Enabling this option will automatically call Flicking#resize when all image/video inside panels are loaded.
This can be useful when you have contents inside Flicking that changes its size when it's loaded

Type: boolean

Default: false

needPanelThreshold

A Threshold from viewport edge before triggering needPanel event

Type: number

Default: 0

preventEventsBeforeInit

When enabled, events are not triggered before ready when initializing

Type: boolean

Default: true

deceleration

Deceleration value for panel movement animation which is triggered by user input. A higher value means a shorter animation time

Type: number

Default: 0.0075

easing

An easing function applied to the panel movement animation. Default value is easeOutCubic

Type: function

Default: x => 1 - Math.pow(1 - x, 3)

See:

Easing Functions Cheat Sheet http://easings.net/

duration

Default duration of the animation (ms)

Type: number

Default: 500

inputType

Types of input devices to enable

Type: Array<string>

Default: ["touch", "mouse"]

See:

Possible values (PanInputOption#inputType)

moveType

Movement style by user input. This will change instance type of Flicking#control
You can use the values of the constant MOVE_TYPE

Type: MOVE_TYPE | Pair.<string, object>

Default: "snap"

moveType	control	options
"snap"	{@link SnapControl}
"freeScroll"	{@link FreeControl}	{@link FreeControlOptions}

import Flicking, { MOVE_TYPE } from "@egjs/flicking";

const flicking = new Flicking({
  moveType: MOVE_TYPE.SNAP
});

const flicking = new Flicking({
  // If you want more specific settings for the moveType
  // [moveType, options for that moveType]
  // In this case, it's ["freeScroll", FreeControlOptions]
  moveType: [MOVE_TYPE.FREE_SCROLL, { stopAtEdge: true }]
});

threshold

Movement threshold to change panel (unit: px). It should be dragged above the threshold to change the current panel.

Type: number

Default: 40

interruptable

Set animation to be interruptable by click/touch.

Type: boolean

Default: true

bounce

The size value of the bounce area. Only can be enabled when circular=false.
You can set different bounce value for prev/next direction by using array.
number for px value, and string for px, and % value relative to viewport size.
You have to call Control#updateInput after changing this to take effect.

Type: string | number | Array<(string|number)>

Default: "20%"

const possibleOptions = [
  // % values, relative to viewport element(".flicking-viewport")'s size
  "0%", "25%", "42%",
  // px values, arithmetic calculation with (+/-) is also allowed.
  "0px", "100px", "50% - 25px",
  // numbers, same to number + px ("0px", "100px")
  0, 100, 1000
];

const flicking = new Flicking("#el", { bounce: "20%" });

flicking.bounce = "100%";
flicking.control.updateInput(); // Call this to update!

iOSEdgeSwipeThreshold

Size of the area from the right edge in iOS safari (in px) which enables swipe-back or swipe-forward

Type: number

Default: 30

preventClickOnDrag

Automatically prevent click event if the user has dragged at least a single pixel on the viewport element

Type: boolean

Default: true

disableOnInit

Automatically call disableInput() on initialization

Type: boolean

Default: false

renderOnlyVisible

Whether to render visible panels only. This can dramatically increase performance when there're many panels

Type: boolean

Default: false

virtual

By enabling this option, it will reduce memory consumption by restricting the number of DOM elements to panelsPerView + 1
Must be used with panelsPerview.
After Flicking's initialized, this property can be used to add/remove the panel count.

Type: VirtualManager

PROPERTY	TYPE	DESCRIPTION
renderPanel	function	A rendering function for the panel element's innerHTML
initialPanelCount	number	Initial panel count to render
cache	boolean	Whether to cache rendered panel's innerHTML
panelClass	string	The class name that will be applied to rendered panel elements

import Flicking, { VirtualPanel } from "@egjs/flicking";

const flicking = new Flicking("#some_el", {
  panelsPerView: 3,
  virtual: {
    renderPanel: (panel: VirtualPanel, index: number) => `Panel ${index}`,
    initialPanelCount: 100
  }
});

// Add 100 virtual panels (at the end)
flicking.virtual.append(100);

// Remove 100 virtual panels from 0 to 100
flicking.virtual.remove(0, 100);

autoInit

readonly

Call init() automatically when creating Flicking's instance

Type: boolean

Default: true

autoResize

Whether to automatically call resize() when the viewport element(.flicking-viewport)'s size is changed

Type: boolean

Default: true

useResizeObserver

Whether to listen ResizeObserver's event instead of Window's resize event when using the autoResize option

Type: boolean

Default: true

externalRenderer

readonly

This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.

Default: null

⚠️ This member is for internal use only.

renderExternal

readonly

This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.

Default: null

⚠️ This member is for internal use only.

Methods

init

async

Initialize Flicking and move to the default index
This is automatically called on Flicking's constructor when autoInit is true(default)

Returns: this

Emits: Flicking#event:ready

destroy

Destroy Flicking and remove all event handlers

Returns: void

async

Move to the previous panel (current index - 1)

Returns: Promise<void>

A Promise which will be resolved after reaching the previous panel

Emits: Flicking#event:moveStart, Flicking#event:move, Flicking#event:moveEnd, Flicking#event:willChange, Flicking#event:changed, Flicking#event:willRestore, Flicking#event:restored, Flicking#event:needPanel, Flicking#event:visibleChange, Flicking#event:reachEdge

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
duration	number	✔️	options.duration	Duration of the panel movement animation (unit: ms)

Throws: FlickingError

code	condition
INDEX_OUT_OF_RANGE	When the previous panel does not exist
ANIMATION_ALREADY_PLAYING	When the animation is already playing
ANIMATION_INTERRUPTED	When the animation is interrupted by user input
STOP_CALLED_BY_USER	When the any of the event's `stop()` is called

async

Move to the next panel (current index + 1)

Returns: Promise<void>

A Promise which will be resolved after reaching the next panel

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
duration	number	✔️	options.duration	Duration of the panel movement animation (unit: ms).

Throws: FlickingError

code	condition
INDEX_OUT_OF_RANGE	When the next panel does not exist
ANIMATION_ALREADY_PLAYING	When the animation is already playing
ANIMATION_INTERRUPTED	When the animation is interrupted by user input
STOP_CALLED_BY_USER	When the any of the event's `stop()` is called

moveTo

async

Move to the panel with given index

Returns: Promise<void>

A Promise which will be resolved after reaching the target panel

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
index	number			The index of the panel to move
duration	number	✔️	options.duration	Duration of the animation (unit: ms)
direction	DIRECTION	✔️	DIRECTION.NONE	Direction to move, only available in the circular mode

Throws: FlickingError

code	condition
INDEX_OUT_OF_RANGE	When the root is not either string or HTMLElement
ANIMATION_ALREADY_PLAYING	When the animation is already playing
ANIMATION_INTERRUPTED	When the animation is interrupted by user input
STOP_CALLED_BY_USER	When the any of the event's `stop()` is called

getPanel

Return the Panel at the given index. null if it doesn't exists.

Returns: Panel | null

Panel at the given index

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
index	number

See:

Panel

const panel = flicking.getPanel(0);
// Which is a shorthand to...
const samePanel = flicking.panels[0];

enableInput

Enable input from the user (mouse/touch)

Returns: this

disableInput

Disable input from the user (mouse/touch)

Returns: this

getStatus

Get current flicking status. You can restore current state by giving returned value to setStatus()

Returns: Status

An object with current status value information

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
options	object	✔️	{}	Status retrieving options
options.index	boolean	✔️	true	Include current panel index to the returning status. Camera will automatically move to the given index when the setStatus is called
options.position	boolean	✔️	true	Include camera position to the returning status. This works only when the moveType is `freeScroll`
options.includePanelHTML	boolean	✔️	false	Include panel's `outerHTML` to the returning status
options.visiblePanelsOnly	boolean	✔️	false	Include only visiblePanel's HTML. This option is available only when the `includePanelHTML` is true

setStatus

Restore to the state of the given Status

Returns: void

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
status	Partial<Status>			Status value to be restored. You should use the return value of the getStatus() method

addPlugins

Add plugins that can have different effects on Flicking

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
plugins	Plugin			The plugin(s) to add

See:

https://github.com/naver/egjs-flicking-plugins

removePlugins

Remove plugins from Flicking.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
plugin	Plugin			The plugin(s) to remove.

See:

https://github.com/naver/egjs-flicking-plugins

resize

async

Update viewport/panel sizes

Returns: this

Emits: Flicking#event:beforeResize, Flicking#event:afterResize

append

Add new panels after the last panel

Returns: Array<Panel>

An array of appended panels

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
element	ElementLike \| Array<ElementLike>			A new HTMLElement, a outerHTML of element, or an array of both

Throws: FlickingError

ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK if called on frameworks (React, Angular, Vue...)
See:

const flicking = new Flicking("#flick");
// These are possible parameters
flicking.append(document.createElement("div"));
flicking.append("\<div\>Panel\</div\>");
flicking.append(["\<div\>Panel\</div\>", document.createElement("div")]);
// Even this is possible
flicking.append("\<div\>Panel 1\</div\>\<div\>Panel 2\</div\>");

prepend

Add new panels before the first panel
This will increase index of panels after by the number of panels added

Returns: Array<Panel>

An array of prepended panels

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
element	ElementLike \| Array<ElementLike>			A new HTMLElement, a outerHTML of element, or an array of both

Throws: FlickingError

ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK if called on frameworks (React, Angular, Vue...)
See:

const flicking = new eg.Flicking("#flick");
flicking.prepend(document.createElement("div"));
flicking.prepend("\<div\>Panel\</div\>");
flicking.prepend(["\<div\>Panel\</div\>", document.createElement("div")]);
// Even this is possible
flicking.prepend("\<div\>Panel 1\</div\>\<div\>Panel 2\</div\>");

insert

Insert new panels at given index
This will increase index of panels after by the number of panels added

Returns: Array<Panel>

An array of prepended panels

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
index	number			Index to insert new panels at
element	ElementLike \| Array<ElementLike>			A new HTMLElement, a outerHTML of element, or an array of both

Throws: FlickingError

ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK if called on frameworks (React, Angular, Vue...)

const flicking = new eg.Flicking("#flick");
flicking.insert(0, document.createElement("div"));
flicking.insert(2, "\<div\>Panel\</div\>");
flicking.insert(1, ["\<div\>Panel\</div\>", document.createElement("div")]);
// Even this is possible
flicking.insert(3, "\<div\>Panel 1\</div\>\<div\>Panel 2\</div\>");

remove

Remove the panel at the given index
This will decrease index of panels after by the number of panels removed

Returns: Array<Panel>

An array of removed panels

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
index	number			Index of panel to remove
deleteCount	number	✔️	1	Number of panels to remove from index

trigger

inherited

Trigger a custom event.

Returns: this

An instance of the component itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
event	string \| ComponentEvent			The name of the custom event to be triggered or an instance of the ComponentEvent
params	Array<any> \| $ts:...			Event data to be sent when triggering a custom event

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  beforeHi: ComponentEvent<{ foo: number; bar: string }>;
  hi: { foo: { a: number; b: boolean } };
  someEvent: (foo: number, bar: string) => void;
  someOtherEvent: void; // When there's no event argument
}> {
  some(){
    if(this.trigger("beforeHi")){ // When event call to stop return false.
      this.trigger("hi");// fire hi event.
    }
  }
}

const some = new Some();
some.on("beforeHi", e => {
  if(condition){
    e.stop(); // When event call to stop, `hi` event not call.
  }
  // `currentTarget` is component instance.
  console.log(some === e.currentTarget); // true

  typeof e.foo; // number
  typeof e.bar; // string
});
some.on("hi", e => {
  typeof e.foo.b; // boolean
});
// If you want to more know event design. You can see article.
// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F

once

inherited

Executed event just one time.

Returns: this

An instance of the component itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string \| $ts:...			The name of the event to be attached or an event name - event handler mapped object.
handlerToAttach	function \| $ts:...	✔️		The handler function of the event to be attached

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  hi: ComponentEvent;
}> {
  hi() {
    alert("hi");
  }
  thing() {
    this.once("hi", this.hi);
  }
}

var some = new Some();
some.thing();
some.trigger(new ComponentEvent("hi"));
// fire alert("hi");
some.trigger(new ComponentEvent("hi"));
// Nothing happens

hasOn

inherited

Checks whether an event has been attached to a component.

Returns: boolean

Indicates whether the event is attached.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string			The name of the event to be attached

import Component from "@egjs/component";

class Some extends Component<{
  hi: void;
}> {
  some() {
    this.hasOn("hi");// check hi event.
  }
}

on

inherited

Attaches an event to a component.

Returns: this

An instance of a component itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string \| $ts:...			The name of the event to be attached or an event name - event handler mapped object.
handlerToAttach	function \| $ts:...	✔️		The handler function of the event to be attached

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  hi: void;
}> {
  hi() {
    console.log("hi");
  }
  some() {
    this.on("hi",this.hi); //attach event
  }
}

off

inherited

Detaches an event from the component.
If the eventName is not given this will detach all event handlers attached.
If the handlerToDetach is not given, this will detach all event handlers for eventName.

Returns: this

An instance of a component itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string \| $ts:...	✔️		The name of the event to be detached
handlerToDetach	function \| $ts:...	✔️		The handler function of the event to be detached

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  hi: void;
}> {
  hi() {
    console.log("hi");
  }
  some() {
    this.off("hi",this.hi); //detach event
  }
}

Events

ready

Event that fires when Flicking's init() is called

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event

beforeResize

Event that fires when Flicking's resize() is called, before updating the sizes of panels and viewport.
You can update the sizes of panels and viewport with this event, and it'll be applied after resize() is finished.

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event
width	number	Previous width of the viewport
height	number	Previous height of the viewport
element	HTMLElement	The viewport element

afterResize

Event that fires when Flicking's resize() is called, after updating the sizes of panels and viewport.

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event
width	number	New width of the viewport
height	number	New height of the viewport
prev	object	Previous size of the viewport
prev.width	number	Previous width of the viewport
prev.height	number	Previous height of the viewport
sizeChanged	boolean	A Boolean value indicating whether the width/height of the viewport element is changed
element	HTMLElement	The viewport element

holdStart

Event that fires when user started dragging.

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event
stop	function	Stop the event action and prevent user from dragging
axesEvent	object	hold event of Axes

holdEnd

Event that fires when user stopped dragging.

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event
axesEvent	object	release event of Axes

moveStart

Event that fires once before first move event

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event
stop	function	Stop the event action and prevent user from dragging
isTrusted	boolean	Boolean that indicates whether the event was generated by a user action
holding	boolean	Boolean that indicates whether the user is dragging the viewport element
direction	DIRECTION	Moving direction relative to previous position of the camera
axesEvent	object	change event of Axes

move

Event that fires for every movement

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event
stop	function	Stop the event action and prevent user from dragging
isTrusted	boolean	Boolean that indicates whether the event was generated by a user action
holding	boolean	Boolean that indicates whether the user is dragging the viewport element
direction	DIRECTION	Moving direction relative to previous position of the camera
axesEvent	object	change event of Axes

moveEnd

Event that fires when the movement is finished by user input release or animation end.

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event
isTrusted	boolean	Boolean that indicates whether the event was generated by a user action
holding	boolean	Boolean that indicates whether the user is dragging the viewport element
direction	DIRECTION	Moving direction relative to previous position of the camera
axesEvent	object	finish event of Axes

willChange

Event that fires when Flicking's active index will be changed. Index will be changed at the changed event.
It can be triggered when user finished input, or flicking start to move by method.
Calling stop() in event will prevent index change and camera movement.

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event
stop	function	Stop the event action and prevent user from dragging
index	number	New active index
panel	Panel	New active panel
isTrusted	boolean	Boolean that indicates whether the event was generated by a user action
direction	DIRECTION	Moving direction from the active panel to the target panel

changed

Event that fires when Flicking's index is changed.

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event
index	number	New index
panel	Panel	New active panel
prevIndex	number	Previous index
prevPanel	Panel \| null	Previous active panel
isTrusted	boolean	Boolean that indicates whether the event was generated by a user action
direction	DIRECTION	Moving direction from the active panel to the target panel

willRestore

Event fires when user drag amount not reached threshold and is returning to currentPanel

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event
stop	function	Stop the event action and prevent user from dragging
index	number	Index of the panel to restore
panel	Panel	Panel to restore
isTrusted	boolean	Boolean that indicates whether the event was generated by a user action
direction	DIRECTION	Moving direction relative to previous position of the camera

restored

Event that fires when Flicking has returned to currentPanel

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event
isTrusted	boolean	Boolean that indicates whether the event was generated by a user action

select

Event that fires when panel is statically click / touched

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event
index	number	Selected panel's index
panel	Panel	Selected panel
direction	DIRECTION	Direction from current camera position to the selected panel's position

needPanel

Event that fires when an empty panel area is visible at the edge of viewport
You can set its threshold with needPanelThreshold

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event
direction	DIRECTION	Direction where new panel is needed. `DIRECTION.PREV` means panels should be prepended and `DIRECTION.NEXT` means panels should be appended

visibleChange

Event that fires when visible panel inside the viewport changes

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event
added	Array<Panel>	Panels that added from previous visible panels
removed	Array<Panel>	Panels that removed from previous visible panels
visiblePanels	Array<Panel>	Current visible panels

reachEdge

Event that fires when camera reaches the maximum/minimum range

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event
direction	DIRECTION	Direction indicates whether the camera's position is at the maximum range(DIRECTION.NEXT) or minimum range(DIRECTION.PREV)

panelChange

Event that fires when a panel is added or removed

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	An Flicking instance that triggered this event
eventType	string	Name of the event
added	Array<Panel>	An array of new panels added
removed	Array<Panel>	An array of panels removed

Constructor​

Properties​

VERSION​

control​

camera​

renderer​

viewport​

initialized​

circularEnabled​

virtualEnabled​

index​

element​

currentPanel​

panels​

panelCount​

visiblePanels​

animating​

holding​

activePlugins​

align​

defaultIndex​

horizontal​

circular​

bound​

adaptive​

panelsPerView​

noPanelStyleOverride​

resizeOnContentsReady​

needPanelThreshold​

preventEventsBeforeInit​

deceleration​

easing​

duration​

inputType​

moveType​

threshold​

interruptable​

bounce​

iOSEdgeSwipeThreshold​

preventClickOnDrag​

disableOnInit​

renderOnlyVisible​

virtual​

autoInit​

autoResize​

useResizeObserver​

externalRenderer​

renderExternal​

Methods​

init​

destroy​

prev​

next​

moveTo​

getPanel​

enableInput​

disableInput​

getStatus​

setStatus​

addPlugins​

removePlugins​

resize​

append​

prepend​

insert​

remove​

trigger​

once​

hasOn​

on​

off​

Events​

ready​

beforeResize​

afterResize​

holdStart​

holdEnd​

moveStart​

move​

moveEnd​

Constructor

Properties

VERSION

control

camera

renderer

viewport

initialized

circularEnabled

virtualEnabled

index

element

currentPanel

panels

panelCount

visiblePanels

animating

holding

activePlugins

align

defaultIndex

horizontal

circular

bound

adaptive

panelsPerView

noPanelStyleOverride

resizeOnContentsReady

needPanelThreshold

preventEventsBeforeInit

deceleration

easing

duration

inputType

moveType

threshold

interruptable

bounce

iOSEdgeSwipeThreshold

preventClickOnDrag

disableOnInit

renderOnlyVisible

virtual

autoInit

autoResize

useResizeObserver

externalRenderer

renderExternal

Methods

init

destroy

prev

next

moveTo

getPanel

enableInput

disableInput

getStatus

setStatus

addPlugins

removePlugins

resize

append

prepend

insert

remove

trigger

once

hasOn

on

off

Events

ready

beforeResize

afterResize

holdStart

holdEnd

moveStart

move

moveEnd