Align position of the panels within viewport.
You can set different values each for the panel and camera.
Index of the panel to move when Flicking's init is called.
A zero-based integer.
Direction of panel movement (true: horizontal, false: vertical)
height: 240px was applied to the viewport(
Enables circular(continuous loop) mode, which connects first/last panel for continuous scrolling.
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
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
Update height of the viewport element after movement same to the height of the panel below.
This can be only enabled when
You should add CSS
transition property to
flicking-viewport to animate height.
A visible number of panels on viewport. Enabling this option will automatically resize panel size
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.
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
You can't use
resizeOnContentsReady when the
virtual option is enabled
A Threshold from viewport edge before triggering needPanel event
When enabled, events are not triggered before
ready when initializing
Deceleration value for panel movement animation which is triggered by user input. A higher value means a shorter animation time
An easing function applied to the panel movement animation. Default value is
Default duration of the animation (ms)
Types of input devices to enable
If an array is given, second value of the array will be used as the options object when creating Control
Movement threshold to change panel (unit: px).
It should be dragged above the threshold to change the current panel.
Set animation to be interruptable by click/touch.
The size value of the bounce area. Only can be enabled when
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.
Size of the area from the right edge in iOS safari (in px) which enables swipe-back or swipe-forward
click event if the user has dragged at least a single pixel on the viewport element.
Hint: Drag a panel slightly and release it to see its effect
Automatically call disableInput() on initialization
Whether to render visible panels only. This can dramatically increase performance when there're many panels
Hint: See panel elements in the developer console
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.
A rendering function for the panel element's innerHTML.
It should return the string value to be used as innerHTML of the panel.
|panel||VirtualPanel||Instance of the panel|
|index||number||Index of the panel|
Initial number of panels to render
The class name that will be applied to rendered panel elements
Whether to cache rendered panel's innerHTML
Call init() automatically when creating Flicking's instance.
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.
Whether to listen ResizeObserver's event instead of Window's resize event when using the
Enabling this option will make Flicking to resize only when the viewport element(
.flicking-viewport)'s size changes.
- UI / Layout