Version: 4.1.0
Migration Guide from v3 to v4
#
HTML structure- To support SSR(Server Side Rendering), Flicking no longer generates viewport & camera element.
- So you have to create a viewport & camera element in your HTML template yourself.
- Also, now you have to import CSS file we're providing and place a correct class names
- We're now using
flicking-viewport
andflicking-camera
instead ofeg-flick-viewport
andeg-flick-camera
- We're now using
- All framework-based Flickings don't have to consider this change, as they're still generating inner elements for you.
#
Changes when using umd modules- We've removed
eg
namespace on umd modules.eg.Flicking
is now justFlicking
#
Removed Options- CSS-related options
- To support SSR, we've removed all CSS-related properties to guarantee UI when rendered in SSR frameworks.
- gap
- You can now set gaps between panels with CSS margins like
margin-right
ormargin-bottom
.
- You can now set gaps between panels with CSS margins like
- zIndex
- You can now directly use CSS
z-index
to viewport element(.flicking-viewport
) instead.
- You can now directly use CSS
- overflow
- You can set
overflow: visible
to viewport element(.flicking-viewport
) instead.
- You can set
- infinite and lastIndex
needPanel
event is now always triggered without the option infinite
- collectStatistics
- thresholdAngle
- isEqualSize and isConstantSize
- anchor and hanger is now merged into the new option named align.
anchor: 20
andhanger: "40%"
is same toalign: { panel: 20, camera: "40%" }
- infiniteThreshold is now renamed to needPanelThreshold
#
Removed methods- replace
- As Flicking no longer supports isolated indexes, we've removed Flicking's replace and added prepend and insert instead.
- Getters
- We're now usinge a getter property instead of
get-
methods - getIndex() > index
- getAllPanels() > panels
- getElement() > element
- getCurrentPanel() > currentPanel
- We're now usinge a getter property instead of
#
Option Changes- adaptive is now only applicable when
horizontal: true
- moveType is now always a
string
#
Option's default value changes- Default value of duration is now
500
(was100
) - Default value of bounce is now
20%
(was[10, 10]
) - Default value of autoResize is now
true
(wasfalse
)
#
Method Changes- addPlugins and removePlugins do not longer accept arrays
#
Event Changes- needPanel is now can be triggered on the index 0
- It always has
direction: "PREV"
- It always has
- We don't longer provide the method fill() in needPanel event
- As all panels now have continuous indexes, you can use
prepend()
orappend()
instead
- As all panels now have continuous indexes, you can use