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"

// Same to { camera: "50%", panel: "50%" }
align: "center"

// Same to { camera: "100%", panel: "100%" }
align: "next"

// Customizing align position
align: { camera: "20%", panel: "40px" }

defaultIndex​

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

defaultIndex: 0

defaultIndex: 1

horizontal​

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

horizontal: true

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>

circular​

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

circular: false

circular: true

circular: true

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"

circularFallback: "bound",
circular: true,
align: "prev"

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

bound: true

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

adaptive: true

.flicking-viewport {
  transition: height 500ms;
}

panelsPerView​

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

panelsPerView: -1
align: "prev"

panelsPerView: 3
align: "prev"

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

panelsPerView: 3
align: "prev"
noPanelStyleOverride: true

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

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

nested: true

Event​

needPanelThreshold​

A Threshold from viewport edge before triggering needPanel event

needPanelThreshold: 0

needPanelThreshold: 100

preventEventsBeforeInit​

When enabled, events are not triggered before ready when initializing

preventEventsBeforeInit: true

preventEventsBeforeInit: false

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

deceleration: 0.0005

easing​

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

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

easing: x => x

Input​

duration​

Default duration of the animation (ms)

duration: 500

duration: 100

duration: 1000

inputType​

Types of input devices to enable

inputType: ["touch", "mouse"]

inputType: ["mouse"]

inputType: ["pointer"]

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

moveType: "snap"

moveType: "freeScroll"
// Or..
moveType: ["freeScroll", { stopAtEdge: true }]

moveType: "strict"
// Or..
moveType: ["strict", { count: 1 }]

threshold​

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

threshold: 40

threshold: 0

threshold: 200

interruptable​

Set animation to be interruptable by click/touch.

interruptable: true

interruptable: false

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%"

bounce: 0

bounce: "100%"

iOSEdgeSwipeThreshold​

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

iOSEdgeSwipeThreshold: 30

iOSEdgeSwipeThreshold: 120

preventClickOnDrag​

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

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

disableOnInit: true

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"

changeOnHold: true,
circular: true,
moveType: "strict"

Performance​

renderOnlyVisible​

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

renderOnlyVisible: false

renderOnlyVisible: true

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.

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

autoInit: false

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

autoResize: false

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

useResizeObserver: false

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

resizeDebounce: 100

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

resizeDebounce: 300
maxResizeDebounce: 1000

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