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
warning

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

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
warning

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

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
moveType: "snap"
1
2
3
4
5
moveType: "freeScroll"
// Or..
moveType: ["freeScroll", { stopAtEdge: true }]
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

disableOnInit#

Automatically call disableInput() on initialization

disableOnInit: false
1
2
3
4
5
disableOnInit: true
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