Skip to main content
Version: Next

Camera

class Camera

A component that manages actual movement inside the viewport

Properties
Methods
element
children
position
alignPosition
offset
circularEnabled
mode
range
rangeDiff
visiblePanels
visibleRange
anchorPoints
controlParams
atEdge
size
progress
panelOrder
align
init
destroy
lookAt
getPrevAnchor
getNextAnchor
getProgressInPanel
findAnchorIncludePosition
findNearestAnchor
findActiveAnchor
clampToReachablePosition
canReach
canSee
updateRange
updateAlignPos
updateAnchors
updateAdaptiveHeight
updateOffset
updatePanelOrder
resetNeedPanelHistory
applyTransform

constructor​

new Camera(flicking, )
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
flickingFlicking
Partial<CameraOptions>✔️{}

Properties​

element​

readonly

The camera element(.flicking-camera)

Type: HTMLElement

children​

readonly

An array of the child elements of the camera element(.flicking-camera)

Type: Array<HTMLElement>

position​

readonly

Current position of the camera

Type: number

alignPosition​

readonly

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

Type: number

offset​

readonly

Position offset, used for the renderOnlyVisible option

Type: number

Default: 0

circularEnabled​

readonly

Whether the circular option is enabled.
The circular option can't be enabled when sum of the panel sizes are too small.

Type: boolean

Default: false

mode​

readonly

A current camera mode

Type: CameraMode

range​

readonly

A range that Camera's position can reach

Type: object

PROPERTYTYPEDESCRIPTION
minnumberA minimum position
maxnumberA maximum position

rangeDiff​

readonly

A difference between Camera's minimum and maximum position that can reach

Type: number

visiblePanels​

readonly

An array of visible panels from the current position

Type: Array<Panel>

visibleRange​

readonly

A range of the visible area from the current position

Type: object

PROPERTYTYPEDESCRIPTION
minnumberA minimum position
minnumberA maximum position

anchorPoints​

readonly

An array of AnchorPoints that Camera can be stopped at

Type: Array<AnchorPoint>

controlParams​

readonly

A current parameters of the Camera for updating AxesController

Type: ControlParams

atEdge​

readonly

A Boolean value indicating whether Camera's over the minimum or maximum position reachable

Type: boolean

size​

readonly

Return the size of the viewport

Type: number

progress​

readonly

Return the camera's position progress from the first panel to last panel
Range is from 0 to last panel's index

Type: number

panelOrder​

readonly

direction CSS property applied to the camera element(.flicking-camera)

Type: string

align​

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

Type: ALIGN | string | number

Methods​

init​

Initialize Camera

Returns: this

Throws: FlickingError

VAL_MUST_NOT_NULL If the camera element(.flicking-camera) does not exist inside viewport element

destroy​

Destroy Camera and return to initial state

Returns: void

lookAt​

Move to the given position and apply CSS transform

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posnumberA new position

Throws: FlickingError

NOT_ATTACHED_TO_FLICKING When init is not called before

getPrevAnchor​

Return a previous AnchorPoint of given AnchorPoint
If it does not exist, return null instead

Returns: AnchorPoint | null

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
anchorAnchorPointA reference AnchorPoint

getNextAnchor​

Return a next AnchorPoint of given AnchorPoint
If it does not exist, return null instead

Returns: AnchorPoint | null

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
anchorAnchorPointA reference AnchorPoint

getProgressInPanel​

Return the camera's position progress in the panel below
Value is from 0 to 1 when the camera's inside panel
Value can be lower than 0 or bigger than 1 when it's in the margin area

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
panelPanel

findAnchorIncludePosition​

Return AnchorPoint that includes given position
If there's no AnchorPoint that includes the given position, return null instead

Returns: AnchorPoint | null

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
positionnumberA position to check

findNearestAnchor​

Return AnchorPoint nearest to given position
If there're no AnchorPoints, return null instead

Returns: AnchorPoint | null

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
positionnumberA position to check

findActiveAnchor​

Return AnchorPoint that matches Flicking#currentPanel

Returns: AnchorPoint | null

clampToReachablePosition​

Clamp the given position between camera's range

Returns: number

  • A clamped position
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
positionnumberA position to clamp

canReach​

Check whether the given panel is inside of the Camera's range

Returns: boolean

  • Whether the panel's inside Camera's range
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
panelPanelAn instance of Panel to check

canSee​

Check whether the given panel element is visible at the current position

Returns: boolean

  • Whether the panel element is visible at the current position
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
panelPanelAn instance of Panel to check

updateRange​

Update range of Camera

Returns: this

Throws: FlickingError

NOT_ATTACHED_TO_FLICKING When init is not called before

updateAlignPos​

Update Camera's alignPosition

Returns: this

updateAnchors​

Update Camera's anchorPoints

Returns: this

Throws: FlickingError

NOT_ATTACHED_TO_FLICKING When init is not called before

updateAdaptiveHeight​

Update Viewport's height to visible panel's max height

Returns: this

Throws: FlickingError

NOT_ATTACHED_TO_FLICKING When init is not called before

updateOffset​

Update current offset of the camera

Returns: this

updatePanelOrder​

Update direction to match the direction CSS property applied to the camera element

Returns: this

resetNeedPanelHistory​

Reset the history of needPanel events so it can be triggered again

Returns: this

applyTransform​

Apply "transform" style with the current position to camera element

Returns: this