Skip to main content
Version: 4.4.1

ExternalPanel

class ExternalPanel extends Panel

An slide data component that holds information of a single HTMLElement

Constructor#

new ExternalPanel(options, options.el, options.index, options.align, options.flicking)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsobjectAn options object
options.elHTMLElement✔️A HTMLElement panel's referencing
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#

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

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#

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

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

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
⚠️ This function is for internal use only.

decreaseIndex#

inherited

Decrease panel's index by the given value

Returns: this

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

updatePosition#

inherited

Returns: this

⚠️ This function is for internal use only.

toggle#

inherited

Returns: boolean

  • toggled
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
prevPosnumber
newPosnumber
⚠️ This function is for internal use only.

updateCircularToggleDirection#

inherited

Returns: this

⚠️ This function is for internal use only.