Skip to main content
Version: 4.5.1

Camera

class Camera

A component that manages actual movement inside the viewport

Constructor

new Camera()
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
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

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
flickingFlickingAn instance of Flicking

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 active panel's height

Returns: this

Throws: FlickingError

NOT_ATTACHED_TO_FLICKING When init is not called before

updateOffset

Update current offset of the camera

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