Skip to main content
Version: 4.1.1

Panel

class Panel

Constructor

new Panel(options, options.index, options.align, options.flicking)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsobjectnoAn options object
options.indexnumberyesAn initial index of the panel
options.alignConstants.ALIGN | string | numberyesAn initial align value of the panel
options.flickingFlickingyesA Flicking instance panel's referencing

Properties

index

readonly

Index of the panel

Type: number

position

readonly

Position of the panel, including alignPosition

Type: number

size

readonly

Cached size of the panel element
This is equal to element's offsetWidth if horizontal is true, and offsetHeight else

Type: number

sizeIncludingMargin

readonly

Panel's size including CSS margin
This value includes element's margin left/right if horizontal is true, and margin top/bottom else

Type: number

height

readonly

Height of the panel element

Type: number

margin

readonly

Cached CSS margin value of the panel element

Type: object

PROPERTYTYPEDESCRIPTION
prevnumberCSS margin-left when the horizontal is true, and margin-top else
nextnumberCSS margin-right when the horizontal is true, and margin-bottom else

alignPosition

readonly

Align position inside the panel where Camera's alignPosition inside viewport should be located at

Type: number

removed

readonly

A value indicating whether the panel's removed

Type: boolean

range

readonly

Panel element's range of the bounding box

Type: object

PROPERTYTYPEDESCRIPTION
minnumberBounding box's left(horizontal: true) / top(horizontal: false)
maxnumberBounding box's right(horizontal: true) / bottom(horizontal: false)

toggled

readonly

A value indicating whether the panel's position is toggled by circular behavior

Type: boolean

toggleDirection

readonly

A direction where the panel's position is toggled

Type: DIRECTION

offset

readonly

Actual position offset determined by Panel#order

Type: number

progress

readonly

Progress of movement between previous or next panel relative to current panel

Type: number

outsetProgress

readonly

Progress of movement between points that panel is completely invisible outside of viewport(prev direction: -1, selected point: 0, next direction: 1)

Type: number

visibleRatio

readonly

Percentage of area where panel is visible in the viewport

Type: number

align

A value indicating where the alignPosition should be located at inside the panel element

Type: Constants.ALIGN | string | number

Methods

resize

Update size of the panel

Returns: this

contains

Check whether the given element is inside of this panel's element

Returns: boolean

  • A Boolean value indicating the element is inside of this panel element
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elementHTMLElementnoThe HTMLElement to check

destroy

Reset internal state and set removed to true

Returns: void

includePosition

Check whether the given position is inside of this panel's range

Returns: boolean

  • A Boolean value indicating whether the given position is included in the panel range
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posnumbernoA position to check
includeMarginbooleanyesfalseInclude margin to the range

includeRange

Check whether the given range is fully included in this panel's area

Returns: boolean

  • A Boolean value indicating whether the given range is fully included in the panel range
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
minnumbernoMinimum value of the range to check
maxnumbernoMaximum value of the range to check
includeMarginbooleanyesfalseInclude margin to the range

focus

Move Camera to this panel

Returns: Promise<void>

  • A Promise which will be resolved after reaching the panel
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
durationnumberyesDuration of the animation (unit: ms)

prev

Get previous(index - 1) panel. When the previous panel does not exist, this will return null instead
If the circular is enabled, this will return the last panel if called from the first panel

Returns: Panel | null

  • The previous panel

next

Get next(index + 1) panel. When the next panel does not exist, this will return null instead
If the circular is enabled, this will return the first panel if called from the last panel

Returns: Panel | null

  • The previous panel

increaseIndex

Increase panel's index by the given value

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
valnumbernoAn integer greater than or equal to 0
⚠️ This function is for internal use only.

decreaseIndex

Decrease panel's index by the given value

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
valnumbernoAn integer greater than or equal to 0
⚠️ This function is for internal use only.

increasePosition

Increase panel's position by the given value

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
valnumbernoAn integer greater than or equal to 0
⚠️ This function is for internal use only.

decreasePosition

Decrease panel's position by the given value

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
valnumbernoAn integer greater than or equal to 0
⚠️ This function is for internal use only.

toggle

Returns: boolean

  • toggled
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
prevPosnumberno
newPosnumberno
⚠️ This function is for internal use only.

updateCircularToggleDirection

Returns: this

⚠️ This function is for internal use only.