Flicking
control
camera
renderer
viewport
initialized
circularEnabled
index
element
currentPanel
panels
panelCount
visiblePanels
animating
holding
activePlugins
align
defaultIndex
horizontal
circular
bound
adaptive
needPanelThreshold
deceleration
easing
duration
inputType
moveType
threshold
interruptable
bounce
iOSEdgeSwipeThreshold
preventClickOnDrag
disableOnInit
renderOnlyVisible
autoInit
autoResize
renderExternal
#
ConstructorPARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
root | HTMLElement | string | no | A root HTMLElement to initialize Flicking on it. When it's a typeof string , it should be a css selector string | |
options | object | yes | {} | An options object for Flicking. |
#
Properties#
VERSIONVersion info string
Type: string
#
controlControl instance of the Flicking
Type: Control
Default: SnapControl
See:
#
cameraCamera instance of the Flicking
Type: Camera
Default: LinearCamera
See:
#
rendererRenderer instance of the Flicking
Type: Renderer
Default: VanillaRenderer
See:
#
viewportA component that manages viewport size
Type: Viewport
See:
#
initializedWhether Flicking's init() is called.
This is true
when init() is called, and is false
after calling destroy().
Type: boolean
Default: false
#
circularEnabledWhether 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
#
indexIndex number of the currentPanel
Type: number
Default: 0
#
elementThe root(.flicking-viewport
) element
Type: HTMLElement
#
currentPanelCurrently active panel
Type: Panel
See:
#
panelsArray of panels
Type: Array<Panel>
See:
#
panelCountCount of panels
Type: number
#
visiblePanelsArray of panels that is visible at the current position
Type: Array<Panel>
See:
#
animatingWhether Flicking's animating
Type: boolean
#
holdingWhether user is clicking or touching
Type: boolean
#
activePluginsA current list of activated plugins
Type: Array<Plugin>
#
alignAlign 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 |
#
defaultIndexIndex of the panel to move when Flicking's init() is called. A zero-based integer
Type: number
Default: 0
#
horizontalDirection of panel movement (true: horizontal, false: vertical)
Type: boolean
Default: true
#
circularEnables circular(continuous loop) mode, which connects first/last panel for continuous scrolling.
Type: boolean
Default: false
#
boundPrevent 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
#
adaptiveUpdate 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
#
needPanelThresholdA Threshold from viewport edge before triggering needPanel
event
Type: number
Default: 0
#
decelerationDeceleration value for panel movement animation which is triggered by user input. A higher value means a shorter animation time
Type: number
Default: 0.0075
#
easingAn 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/
#
durationDefault duration of the animation (ms)
Type: number
Default: 500
#
inputTypeTypes of input devices to enable
Type: Array<string>
Default: ["touch", "mouse"]
See:
#
moveTypeMovement 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} |
#
thresholdMovement threshold to change panel (unit: px). It should be dragged above the threshold to change the current panel.
Type: number
Default: 40
#
interruptableSet animation to be interruptable by click/touch.
Type: boolean
Default: true
#
bounceThe 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%"
#
iOSEdgeSwipeThresholdSize of the area from the right edge in iOS safari (in px) which enables swipe-back or swipe-forward
Type: number
Default: 30
#
preventClickOnDragAutomatically prevent click
event if the user has dragged at least a single pixel on the viewport element
Type: boolean
Default: true
#
disableOnInitAutomatically call disableInput() on initialization
Type: boolean
Default: false
#
renderOnlyVisibleWhether to render visible panels only. This can dramatically increase performance when there're many panels.
Type: boolean
Default: false
#
autoInitCall init() automatically when creating Flicking's instance
Type: boolean
Default: true
#
autoResizeAttach Flicking's resize method to window's resize event.
Flicking will automatically call resize window size and orientation change.
Type: boolean
Default: true
#
renderExternalThis is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
Type: boolean
Default: false
#
Methods#
initInitialize 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
#
destroyDestroy Flicking and remove all event handlers
Returns: void
#
prevMove 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 | yes | 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 |
#
nextMove to the next panel (current index + 1)
Returns: Promise<void>
- A Promise which will be resolved after reaching the next 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 | yes | 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 |
#
moveToMove to the panel with given index
Returns: Promise<void>
- A Promise which will be resolved after reaching the target 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 |
---|---|---|---|---|
index | number | no | The index of the panel to move | |
duration | number | yes | options.duration | Duration of the animation (unit: ms) |
direction | DIRECTION | yes | 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 |
#
getPanelReturn 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 | no |
See:
#
enableInputEnable input from the user (mouse/touch)
Returns: this
#
disableInputDisable input from the user (mouse/touch)
Returns: this
#
getStatusGet current flicking status. You can restore current state by giving returned value to setStatus()
Returns: Partial<Status>
- An object with current status value information
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
options | object | yes | {} | Status retrieving options |
options.index | boolean | yes | 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 | yes | true | Include camera position to the returning status. This works only when the moveType is freeScroll |
options.includePanelHTML | boolean | yes | Include panel's outerHTML to the returning status | |
options.visiblePanelsOnly | boolean | yes | Include only visiblePanel's HTML. This option is available only when the includePanelHTML is true |
#
setStatusRestore to the state of the given Status
Returns: void
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
status | Partial<Status> | no | Status value to be restored. You should use the return value of the getStatus() method |
#
addPluginsAdd plugins that can have different effects on Flicking
Returns: this
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
plugins | Plugin | no | The plugin(s) to add |
See:
#
removePluginsRemove plugins from Flicking.
Returns: this
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
plugin | Plugin | no | The plugin(s) to remove. |
See:
#
resizeUpdate viewport/panel sizes
Returns: this
Emits: Flicking#event:beforeResize, Flicking#event:afterResize
#
appendAdd new panels after the last panel
Returns: Array<Panel>
- An array of appended panels
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
element | ElementLike | Array<ElementLike> | no | 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:
#
prependAdd 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> | no | 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:
#
insertInsert 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 | no | Index to insert new panels at | |
element | ElementLike | Array<ElementLike> | no | 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...)
#
removeRemove 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 | no | Index of panel to remove | |
deleteCount | number | yes | 1 | Number of panels to remove from index |
#
triggerTrigger a custom event.
Returns: this
- An instance of the component itself
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
event | string | ComponentEvent | no | The name of the custom event to be triggered or an instance of the ComponentEvent | |
params | Array<any> | $ts:... | no | Event data to be sent when triggering a custom event |
#
onceExecuted event just one time.
Returns: this
- An instance of the component itself
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
eventName | string | $ts:... | no | The name of the event to be attached or an event name - event handler mapped object. | |
handlerToAttach | function | $ts:... | yes | The handler function of the event to be attached |
#
hasOnChecks whether an event has been attached to a component.
Returns: boolean
- Indicates whether the event is attached.
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
eventName | string | no | The name of the event to be attached |
#
onAttaches an event to a component.
Returns: this
- An instance of a component itself
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
eventName | string | $ts:... | no | The name of the event to be attached or an event name - event handler mapped object. | |
handlerToAttach | function | $ts:... | yes | The handler function of the event to be attached |
#
offDetaches 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:... | yes | The name of the event to be detached | |
handlerToDetach | function | $ts:... | yes | The handler function of the event to be detached |
#
Events#
readyEvent 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 |
#
beforeResizeEvent 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 |
#
afterResizeEvent 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 |
#
holdStartEvent 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 |
#
holdEndEvent 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 |
#
moveStartEvent 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 |
#
moveEvent 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 |
#
moveEndEvent 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 |
#
willChangeEvent 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 |
#
changedEvent 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 |
#
willRestoreEvent 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 |
#
restoredEvent 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 |
#
selectEvent 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 |
#
needPanelEvent 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 |
#
visibleChangeEvent 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 |
#
reachEdgeEvent 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) |
#
panelChangeEvent 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 |