Skip to main content
Version: 4.6.3

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