Skip to main content
Version: 4.11.2

VirtualPanel

class VirtualPanel extends Panel

An slide data component that holds information of a single HTMLElement

constructor

new VirtualPanel(options, options.index, options.align, options.flicking)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsobjectAn options object
options.indexnumber✔️An initial index of the panel
options.alignConstants.ALIGN | string | number✔️An initial align value of the panel
options.flickingFlicking✔️A Flicking instance panel's referencing

Properties

element

readonly

HTMLElement that panel's referencing

Type: HTMLElement

cachedInnerHTML

readonly

Cached innerHTML by the previous render function

Type: string | null

elementIndex

readonly

An number for indexing which element it will be rendered on

Type: number

elementProvider

readonlyinherited

index

readonlyinherited

Index of the panel

Type: number

position

readonlyinherited

Position of the panel, including alignPosition

Type: number

size

readonlyinherited

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

Type: number

sizeIncludingMargin

readonlyinherited

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

readonlyinherited

Height of the panel element

Type: number

margin

readonlyinherited

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

readonlyinherited

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

Type: number

removed

readonlyinherited

A value indicating whether the panel's removed

Type: boolean

rendered

readonlyinherited

A value indicating whether the panel's element is being rendered on the screen

Type: boolean

loading

readonlyinherited

A value indicating whether the panel's image/video is not loaded and waiting for resize

Type: boolean

range

readonlyinherited

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

readonlyinherited

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

Type: boolean

toggleDirection

readonlyinherited

A direction where the panel's position is toggled

Type: DIRECTION

offset

readonlyinherited

Actual position offset determined by Panel#order

Type: number

progress

readonlyinherited

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

Type: number

outsetProgress

readonlyinherited

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

readonlyinherited

Percentage of area where panel is visible in the viewport

Type: number

align

inherited

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

Type: Constants.ALIGN | string | number

Methods

markForShow

inherited

Mark panel element to be appended on the camera element

markForHide

inherited

Mark panel element to be removed from the camera element

resize

inherited

Update size of the panel

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
cachedobject✔️Predefined cached size of the panel

setSize

inherited

Change panel's size. This will change the actual size of the panel element by changing its CSS width/height property

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
sizeobject✔️New panel size
size.widthnumber | string✔️CSS string or number(in px)
size.heightnumber | string✔️CSS string or number(in px)

contains

inherited

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
elementHTMLElementThe HTMLElement to check

destroy

inherited

Reset internal state and set removed to true

Returns: void

includePosition

inherited

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
posnumberA position to check
includeMarginboolean✔️falseInclude margin to the range

includeRange

inherited

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

Returns: boolean

  • A Boolean value indicating whether the given range is fully included in the panel range
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
minnumberMinimum value of the range to check
maxnumberMaximum value of the range to check
includeMarginboolean✔️falseInclude margin to the range

isVisibleOnRange

inherited

Check whether the panel is visble in the given range (exclusive)

Returns: boolean

  • A Boolean value indicating whether the panel is visible
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
minnumberMinimum value of the range to check
maxnumberMaximum value of the range to check

focus

inherited

Move Camera to this panel

Returns: Promise<void>

  • A Promise which will be resolved after reaching the panel
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
durationnumber✔️Duration of the animation (unit: ms)

prev

inherited

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

inherited

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

inherited

Increase panel's index by the given value

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
valnumberAn integer greater than or equal to 0

decreaseIndex

inherited

Decrease panel's index by the given value

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
valnumberAn integer greater than or equal to 0

updatePosition

inherited

Returns: this

toggle

inherited

Returns: boolean

  • toggled
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
prevPosnumber
newPosnumber

updateCircularToggleDirection

inherited

Returns: this