Camera
A component that manages actual movement inside the viewport
Constructor
constructor(flicking: Flicking, { align }?: Partial<CameraOptions>);
Creates a new Camera instance
Parameters
flicking (Flicking) - An instance of Flicking
{ align } (Partial<CameraOptions>) -
Properties
align
Type: FlickingOptions["align"]
A value indicating where the alignPosition should be located at inside the viewport element
alignPosition
Type: number
Align position inside the viewport where Panel's alignPosition should be located at
This property is read-only.
anchorPoints
Type: AnchorPoint[]
An array of AnchorPoints that Camera can be stopped at
This property is read-only.
atEdge
Type: boolean
A Boolean value indicating whether Camera's over the minimum or maximum position reachable
This property is read-only.
children
Type: HTMLElement[]
An array of the child elements of the camera element(.flicking-camera)
This property is read-only.
circularEnabled
Type: boolean
Whether the circular option is enabled.
Remarks: The circular option can't be enabled when sum of the panel sizes are too small.
Default: false
This property is read-only.
controlParams
Type: { range: CameraRange; position: number; circular: boolean; }
A current parameters of the Camera for updating AxesController
This property is read-only.
offset
Type: number
Position offset, used for the renderOnlyVisible option
Default: 0
This property is read-only.
panelOrder
Type: ValueOf<typeof ORDER>
direction CSS property applied to the camera element(.flicking-camera)
This property is read-only.
progress
Type: number
Return the camera's position progress from the first panel to last panel
Remarks: Range is from 0 to last panel's index
This property is read-only.
rangeDiff
Type: number
A difference between Camera's minimum and maximum position that can reach
This property is read-only.
visiblePanels
Type: Panel[]
An array of visible panels from the current position
This property is read-only.
visibleRange
Type: CameraRange
A range of the visible area from the current position
This property is read-only.
Methods
applyTransform
applyTransform(): this
Apply "transform" style with the current position to camera element
Returns: The current instance for method chaining
canReach
canReach(panel: Panel): boolean
Check whether the given panel is inside of the Camera's range
Parameters:
panel(Panel) - An instance of Panel to check
Returns: Whether the panel's inside Camera's range
canSee
canSee(panel: Panel): boolean
Check whether the given panel element is visible at the current position
Parameters:
panel(Panel) - An instance of Panel to check
Returns: Whether the panel element is visible at the current position
clampToReachablePosition
clampToReachablePosition(position: number): number
Clamp the given position between camera's range
Parameters:
position(number) - A position to clamp
Returns: A clamped position
destroy
destroy(): this
Destroy Camera and return to initial state
Returns: The current instance for method chaining
Remarks: This method resets all internal values to their initial state.
findActiveAnchor
findActiveAnchor(): AnchorPoint | null
Return AnchorPoint that matches currentPanel
Returns: The AnchorPoint that matches current panel
findAnchorIncludePosition
findAnchorIncludePosition(position: number): AnchorPoint | null
Return AnchorPoint that includes given position
Parameters:
position(number) - A position to check
Returns: The AnchorPoint that includes the given position
Remarks: If there's no AnchorPoint that includes the given position, return null instead
findNearestAnchor
findNearestAnchor(position: number): AnchorPoint | null
Return AnchorPoint nearest to given position
Parameters:
position(number) - A position to check
Returns: The AnchorPoint nearest to the given position
Remarks: If there're no AnchorPoints, return null instead
getNextAnchor
getNextAnchor(anchor: AnchorPoint): AnchorPoint | null
Return a next AnchorPoint of given AnchorPoint
Parameters:
anchor(AnchorPoint) - A reference AnchorPoint
Returns: The next AnchorPoint
Remarks: If it does not exist, return null instead
getPrevAnchor
getPrevAnchor(anchor: AnchorPoint): AnchorPoint | null
Return a previous AnchorPoint of given AnchorPoint
Parameters:
anchor(AnchorPoint) - A reference AnchorPoint
Returns: The previous AnchorPoint
Remarks: If it does not exist, return null instead
getProgressInPanel
getProgressInPanel(panel: Panel): number
Return the camera's position progress in the panel below
Parameters:
panel(Panel) - A panel to check
Returns: Progress value from 0 to 1 (or outside this range when in margin area)
Remarks: 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
init
init(): this
Initialize Camera
Returns: The current instance for method chaining
Remarks: This method is called automatically during init. It finds the camera element inside the viewport.
Throws:
lookAt
lookAt(pos: number): void
Move to the given position and apply CSS transform
Parameters:
pos(number) - A new position
Remarks: This method updates the camera position, toggles panels for circular mode, and refreshes visible panels.
Throws:
resetNeedPanelHistory
resetNeedPanelHistory(): this
Reset the history of Flicking.event:needPanel | needPanel events so it can be triggered again
Returns: The current instance for method chaining
updateAdaptiveHeight
updateAdaptiveHeight(): void
Update Viewport's height to visible panel's max height
Remarks: This method only takes effect when horizontal is true and adaptive is enabled.
Throws:
updateAlignPos
updateAlignPos(): this
Update Camera's alignPosition
Returns: The current instance for method chaining
updateAnchors
updateAnchors(): this
Update Camera's anchorPoints
Returns: The current instance for method chaining
Remarks: Anchor points are positions where the camera can stop. This method recalculates them based on the current mode.
Throws:
updateOffset
updateOffset(): this
Update current offset of the camera
Returns: The current instance for method chaining
updatePanelOrder
updatePanelOrder(): this
Update direction to match the direction CSS property applied to the camera element
Returns: The current instance for method chaining