Skip to main content
Version: 4.4.1

Viewport

class Viewport

A component that manages viewport size

Constructor#

new Viewport(el)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elHTMLElementA viewport element

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