Methods #

Start by initializing Carousel and storing instance in a variable.

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

const myCarousel = new Carousel(container, options);

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

myCarousel.slideNext();

JSFiddle Example

Instance Methods #

addSlide #

Create the slide(s) and add by the specified index

Parameters

index: number, what: userSlideType | Array<userSlideType>

Returns

void

Note

type userSlideType = String | HTMLElement | Partial<slideType>;

interface slideType {
  html: string;
  el: HTMLElement | null;
  isDom: boolean;
  class: string;
  index: number;
  dim: number;
  gap: number;
  pos: number;
  transition: string | false;
}

Example

https://jsfiddle.net/nb39vd8m/

appendSlide #

Create slide(s) and add to the end of the carousel

Parameters

what: userSlideType | Array<userSlideType>

Returns

void

Note

type userSlideType = String | HTMLElement | Partial<slideType>;

interface slideType {
  html: string;
  el: HTMLElement | null;
  isDom: boolean;
  class: string;
  index: number;
  dim: number;
  gap: number;
  pos: number;
  transition: string | false;
}

Example

https://jsfiddle.net/nb39vd8m/

clearTransitions #

Stop transition effect

Returns

void

destroy #

Destroy the instance

Returns

void

getPageForSlide #

Return the index of the page containing the slide

Parameters

index: number

Returns

number

getPageFromPosition #

Get the page index for a given Panzoom position

Parameters

pos: number

Returns

{
  pageIndex: number;
  page: number;
}

getProgress #

Get the progress of the active or selected page relative to the "center"

Parameters

index?: number, raw?: boolean, ignoreInfinite?: boolean

Returns

number

getVisibleSlides #

Return all slides that are at least partially visible

Parameters

multiplier?: number

Returns

Set<slideType>

prependSlide #

Create slide(s) and prepend to the beginning of the carousel

Parameters

what: userSlideType | Array<userSlideType>

Returns

void

Note

type userSlideType = String | HTMLElement | Partial<slideType>;

interface slideType {
  html: string;
  el: HTMLElement | null;
  isDom: boolean;
  class: string;
  index: number;
  dim: number;
  gap: number;
  pos: number;
  transition: string | false;
}

Example

https://jsfiddle.net/nb39vd8m/

reInit #

Reset carousel after initializing it, this method allows to replace options and plugins

Parameters

userOptions?: Partial<OptionsType> | null, userPlugins?: PluginsType | null

Returns

void

removeSlide #

Remove slide and DOM elements from the carousel

Parameters

index: number

Returns

void

setPageFromPosition #

Update page index based on Panzoom position

Returns

void

Example

https://jsfiddle.net/6ojbmsa8/

setViewportHeight #

Set the height of the viewport to match the maximum height of the slides on the current page

Returns

void

slideNext #

Slide to the next page

Returns

void

slidePrev #

Slide to the previous page

Returns

void

slideTo #

Slide to page by its index with optional parameters

Parameters

pageIndex?: number | string, { friction, transition, }?: {
    friction?: number;
    transition?: string | false;
}

Returns

void

slideToClosest #

Re-center carousel

Parameters

opts: any

Returns

void

updateMetrics #

Forces to recalculate elements metrics

Returns

void