Skip to main content
Version: 4.12.0

Viewport

class Viewport

A component that manages viewport size

constructor

new Viewport(el, el)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elFlickingA viewport element
elHTMLElement

Properties

element

readonly

A viewport(root) element

Type: HTMLElement

width

readonly

Viewport width, without paddings

Type: number

height

readonly

Viewport height, without paddings

Type: number

padding

readonly

Viewport paddings

Type: object

PROPERTYTYPEDESCRIPTION
leftnumberCSS padding-left
rightnumberCSS padding-right
topnumberCSS padding-top
bottomnumberCSS padding-bottom

Methods

setSize

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

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

resize

Update width/height to the current viewport element's size