Fancyapps

Methods ​

Carousel instances provide multiple functions for interaction, status checking, etc.

Usage ​

Start by initializing Carousel and storing instance in a variable.

js
const container = document.getElementById("myPanzoom");
const options = { infinite: true };

const myCarousel = Carousel(container, options).init();

Now you are ready to call any available method as shown below:

js
myCarousel.next();

Instance Methods ​

add ​

Add one or multiple virtual slides

Parameters

oneOrMoreSlides: Partial<CarouselSlide> | Partial<CarouselSlide>[], position?: number

Returns

CarouselInstance

canGoPrev ​

Check if carousel can move to the previous page

Returns

boolean

canGoNext ​

Check if carousel can move to the next page

Returns

boolean

destroy ​

Destroy instance and clean up

Returns

CarouselInstance

emit ​

Emit event to listeners

Parameters

event: CarouselEvent, ...args: CarouselEventArgs[CarouselEvent]

Returns

void

filter ​

Filter slides using the selector

Parameters

selector?: string

Returns

CarouselInstance

getContainer ​

Get reference to the container DOM element

Returns

HTMLElement

getGapDim ​

Get value for the spacing between slides

Returns

number

getGestures ​

Get reference to the Gestures instance

Returns

GesturesInstance

getLastMouseMove ​

Get the last mousemove event above the carousel

Returns

MouseEvent

getOptions ​

Get current options

Returns

CarouselOptions

getPage ​

Get current page object

Returns

CarouselPage

getPageIndex ​

Get current page index; can also be used to determine which page a slide is on

Parameters

slideIndex?: number

Returns

number

getPageIndexFromPosition ​

Get page index from position of the carousel track

Parameters

position: number

Returns

number

getPageProgress ​

Get page progress

Parameters

pageIndex?: number, ignoreInfinite?: boolean

Returns

number

getPageVisibility ​

Check what percentage of the page is visible

Parameters

pageIndex?: number

Returns

number

getPages ​

Get all page objects

Returns

CarouselPage[]

getPlugins ​

Get all initialized plugins

Returns

Partial<CarouselPlugins>

getPosition ​

Get current position of the carousel track

Parameters

ignoreInfinite?: boolean

Returns

number

getSlides ​

Get all slide objects

Returns

CarouselSlide[]

getState ​

Get current state of the instance

Returns

CarouselState

getTotalSlideDim ​

Get total width of all slides (or height for a vertical carousel)

Parameters

addExtraGapForInfinite?: boolean

Returns

number

getTween ​

Get reference to the Tween instance

Returns

TweenInstance | undefined

getViewport ​

Get reference to the viewport DOM element

Returns

HTMLElement

getViewportDim ​

Get width of the viewport element (or height for a vertical carousel)

Returns

number

getVisibleSlides ​

Get slides with elements visible in the viewport

Parameters

ppos?: number

Returns

CarouselSlide[]

goTo ​

Move to the selected page

Parameters

pageIndex: number, args?: CarouselGoToArgs

Returns

void

hasNavigated ​

Check if carousel has moved to another page at least once

Returns

boolean

hideError ​

Remove DOM element containing the error message from the slide

Parameters

slide: CarouselSlide

Returns

void

hideLoading ​

Remove DOM element containing loading indicator from the slide

Parameters

slide: CarouselSlide

Returns

void

init ​

Initialize Carousel instance

Returns

CarouselInstance

isInfinite ​

Check if infinite navigation is enabled

Returns

boolean

isInTransition ​

Check if slide change CSS transition is currently running

Returns

boolean

isRTL ​

Check if carousel direction is from right to left

Returns

boolean

isSettled ​

Check if current page is in place

Returns

boolean

isVertical ​

Check if carousel is vertical

Returns

boolean

localize ​

Translate text with current language strings

Parameters

str: string, params?: Array<[string, any]>

Returns

string

next ​

Move to the next page

Parameters

args?: CarouselGoToArgs

Returns

CarouselInstance

off ​

Remove event listener

Parameters

what: CarouselEvent | CarouselEvent[], callback: (api: any, ...args: CarouselEventArgs[CarouselEvent]) => void

Returns

CarouselInstance

on ​

Add event listener

Parameters

what: CarouselEvent | CarouselEvent[], callback: (api: any, ...args: CarouselEventArgs[CarouselEvent]) => void

Returns

CarouselInstance

prev ​

Move to the previous page

Parameters

args?: CarouselGoToArgs

Returns

CarouselInstance

reInit ​

Perform a hard reset of the carousel after it has been initialized

Parameters

optionsoptions?: Partial<CarouselOptions>, plugins?: Record<string, CarouselPlugin>

Returns

CarouselInstance

remove ​

Remove slide at the selected position

Parameters

position?: number

Returns

CarouselInstance

setPosition ​

Set new position of the track

Parameters

newPosition: number

Returns

void

showError ​

Show error message on selected slide

Parameters

slide: CarouselSlide, message?: string

Returns

CarouselInstance

showLoading ​

Show loading indicator on selected slide

Parameters

slide: CarouselSlide

Returns

CarouselInstance