Skip to main content

Options

UI / Layout

align

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

// Same to { camera: "0%", panel: "0%" }
align: "prev"
1
2
3
// Same to { camera: "50%", panel: "50%" }
align: "center"
1
2
3
// Same to { camera: "100%", panel: "100%" }
align: "next"
1
2
3
// Customizing align position
align: { camera: "20%", panel: "40px" }
1
2
3

defaultIndex

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

defaultIndex: 0
1
2
3
defaultIndex: 1
1
2
3

horizontal

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

info

Additional CSS height: 240px was applied to the viewport(.flicking-viewport) element.

horizontal: true
1
2
3
4
5
horizontal: false
<!-- You should add class "vertical" to the viewport element -->
<!-- if you're using non-framework(vanilla) Flicking -->
<div class="flicking-viewport vertical">
<div class="flicking-camera">
<div class="flicking-panel"></div>
<div class="flicking-panel"></div>
<div class="flicking-panel"></div>
</div>
</div>
1
2
3
4
5

circular

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

circular: false
1
2
3
circular: true
1
2
3
danger

If the sum of the panel sizes is too small, circular will not be enabled.
This is because Flicking doesn't clone panel elements for the performance and to prevent other issues.
You can check this with circularEnabled property of Flicking.

To enable circular mode, all panels should pass the below condition
Sum of panel sizes - panel size >= viewport size

circular: true
1
2

circularFallback

Set panel control mode for the case when circular cannot be enabled.
"linear" will set the view's range from the top of the first panel to the top of the last panel.
"bound" will prevent the view from going out of the first/last panel, so it won't show empty spaces before/after the first/last panel.

circularFallback: "linear",
circular: true,
align: "prev"
1
2
circularFallback: "bound",
circular: true,
align: "prev"
1
2

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

bound: false
1
2
3
4
5
bound: true
1
2
3
4
5

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

adaptive: false
1
2
3
adaptive: true
.flicking-viewport {
transition: height 500ms;
}
1
2
3
info

You should add CSS transition property to flicking-viewport to animate height.

panelsPerView

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

panelsPerView: -1
align: "prev"
1
2
3
panelsPerView: 3
align: "prev"
1
2
3

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.

panelsPerView: 3
align: "prev"
noPanelStyleOverride: false
1
2
3
panelsPerView: 3
align: "prev"
noPanelStyleOverride: true
1
2
3

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

resizeOnContentsReady: false
resizeOnContentsReady: true
danger

You can't use resizeOnContentsReady when the virtual option is enabled

nested

If you enable this option on child Flicking when the Flicking is placed inside the Flicking, the parent Flicking will move in the same direction after the child Flicking reaches the first/last panel.
If the parent Flicking and child Flicking have different horizontal option, you do not need to set this option.

nested: false
1
2.1
2.2
2.3
2.4
2.5
3.1
3.2
3.3
3.4
3.5
4
nested: true
1
2.1
2.2
2.3
2.4
2.5
3.1
3.2
3.3
3.4
3.5
4

Event

needPanelThreshold

A Threshold from viewport edge before triggering needPanel event

needPanelThreshold: 0
1
2
3
needPanelThreshold: 100
1
2
3

preventEventsBeforeInit

When enabled, events are not triggered before ready when initializing

preventEventsBeforeInit: true
1
2
3
Events triggered
preventEventsBeforeInit: false
1
2
3
Events triggered

Animation

deceleration

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

deceleration: 0.0075
1
2
3
4
5
deceleration: 0.0005
1
2
3
4
5

easing

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

easing: x => 1 - Math.pow(1 - x, 3)
1
2
3
4
5
easing: x => x
1
2
3
4
5

Input

duration

Default duration of the animation (ms)

duration: 500
1
2
3
4
5
duration: 100
1
2
3
4
5
duration: 1000
1
2
3
4
5

inputType

Types of input devices to enable

inputType: ["touch", "mouse"]
1
2
3
4
5
inputType: ["mouse"]
1
2
3
4
5
inputType: ["pointer"]
1
2
3
4
5

moveType

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

If an array is given, second value of the array will be used as the options object when creating Control

moveTypecontroloptions
"snap" (MOVE_TYPE.SNAP)SnapControl
"freeScroll" (MOVE_TYPE.FREE_SCROLL)FreeControlFreeControlOptions
"strict" (MOVE_TYPE.STRICT)StrictControlStrictControlOptions
moveType: "snap"
1
2
3
4
5
moveType: "freeScroll"
// Or..
moveType: ["freeScroll", { stopAtEdge: true }]
1
2
3
4
5
moveType: "strict"
// Or..
moveType: ["strict", { count: 1 }]
1
2
3
4
5

threshold

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

threshold: 40
1
2
3
4
5
threshold: 0
1
2
3
4
5
threshold: 200
1
2
3
4
5

interruptable

Set animation to be interruptable by click/touch.

interruptable: true
1
2
3
4
5
interruptable: false
1
2
3
4
5

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.

bounce: "20%"
1
2
3
4
5
bounce: 0
1
2
3
4
5
bounce: "100%"
1
2
3
4
5

iOSEdgeSwipeThreshold

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

iOSEdgeSwipeThreshold: 30
1
2
3
4
5
iOSEdgeSwipeThreshold: 120
1
2
3
4
5

preventClickOnDrag

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

info

Hint: Drag a panel slightly and release it to see its effect

preventClickOnDrag: true
preventClickOnDrag: false

preventDefaultOnDrag

Whether to use the preventDefault when the user starts dragging.

preventDefaultOnDrag: false
preventDefaultOnDrag: true

disableOnInit

Automatically call disableInput() on initialization

disableOnInit: false
1
2
3
4
5
disableOnInit: true
1
2
3
4
5

changeOnHold

Change active panel index on mouse/touch hold while animating.
index of the willChange/willRestore event will be used as new index.
This can prevent willRestore from being called on continuous swipe when using circular: true.
It can also create more smooth swipe experience when using moveType: "strict"

changeOnHold: false,
circular: true,
moveType: "strict"
1
2
3
4
5
changeOnHold: true,
circular: true,
moveType: "strict"
1
2
3
4
5

Performance

renderOnlyVisible

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

info

Hint: See panel elements in the developer console

renderOnlyVisible: false
1
2
3
4
5
renderOnlyVisible: true
1
2
3
4
5

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.

renderPanel

A rendering function for the panel element's innerHTML.
It should return the string value to be used as innerHTML of the panel.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
panelVirtualPanelInstance of the panel
indexnumberIndex of the panel

Type: function
Return: string

initialPanelCount

Initial number of panels to render

Type: number

panelClass

The class name that will be applied to rendered panel elements

Type: string
Default: "flicking-panel"

cache

Whether to cache rendered panel's innerHTML

Type: boolean
Default: false

virtual: null
panelsPerView: 2,
virtual: {
renderPanel: (panel, index) => `<span class="flicking-index">${index + 1}</span>`,
initialPanelCount: 1000,
panelClass: "flicking-panel has-background-primary has-text-white is-size-1",
cache: false
}

Others

autoInit

Call init() automatically when creating Flicking's instance.

autoInit: true
1
2
3
4
5
autoInit: false
1
2
3
4
5

autoResize

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

Change window size or change orientation(on mobile) to see its effect.

autoResize: true
1
2
3
4
5
autoResize: false
1
2
3
4
5

useResizeObserver

Whether to listen ResizeObserver's event instead of Window's resize event when using the autoResize option.
Enabling this option will make Flicking to resize only when the viewport element(.flicking-viewport)'s size changes.

useResizeObserver: true
1
2
3
4
5
useResizeObserver: false
1
2
3
4
5

resizeDebounce

Delays size recalculation from autoResize by the given time in milisecond.
If the size is changed again while being delayed, it cancels the previous one and delays from the beginning again.
This can increase performance by preventing resize being called too often.

resizeDebounce: 0 // default
1
2
3
4
5
resizeDebounce: 100
1
2
3
4
5

maxResizeDebounce

The maximum time for size recalculation delay when using resizeDebounce, in milisecond.
This guarantees that size recalculation is performed at least once every (n)ms.
Value should be greater than resizeDebounce

resizeDebounce: 16
maxResizeDebounce: 100 // default
1
2
3
4
5
resizeDebounce: 300
maxResizeDebounce: 1000
1
2
3
4
5

useFractionalSize

By enabling this, Flicking will calculate all internal size with CSS width computed with getComputedStyle.
This can prevent 1px offset issue in some cases where panel size has the fractional part.
All sizes will have the original size before CSS transform is applied on the element.

useFractionalSize: false // default
useFractionalSize: true