default | Swiper

Hierarchy

SwiperClass<SwiperEvents>
- default

Implements

default

Implemented by

default

Index

Constructors

constructor

Properties

Methods

Constructors

constructor

new default(container: HTMLElement | CSSSelector, options?: SwiperOptions): default

Inherited from SwiperClass<SwiperEvents>.constructor
- Defined in swiper/types/swiper-class.d.ts:498
Constructs a new Swiper instance.

Parameters
- container: HTMLElement | CSSSelector
  
  Where Swiper applies to.
- Optional options: SwiperOptions
  
  Instance options.
Returns default

Properties

$el

$el: Dom7Array

Dom7 element with slider container HTML element. To get vanilla HTMLElement use swiper.el

$wrapperEl

$wrapperEl: Dom7Array

Dom7 element with slider wrapper HTML element. To get vanilla HTMLElement use swiper.wrapperEl

a11y

a11y: A11yMethods

activeIndex

activeIndex: number

Index number of currently active slide

note: Note, that in loop mode active index value will be always shifted on a number of looped/duplicated slides

allowSlideNext

allowSlideNext: boolean

Disable / enable ability to slide to the next slides by assigning false / true to this property

allowSlidePrev

allowSlidePrev: boolean

Disable / enable ability to slide to the previous slides by assigning false / true to this property

allowTouchMove

allowTouchMove: boolean

Disable / enable ability move slider by grabbing it with mouse or by touching it with finger (on touch screens) by assigning false / true to this property

animating

animating: boolean

true if swiper is in transition

autoplay

autoplay: AutoplayMethods

clickedIndex

clickedIndex: number

Index number of last clicked slide

clickedSlide

clickedSlide: HTMLElement

Link to last clicked slide (HTMLElement)

currentBreakpoint

currentBreakpoint: any

!INTERNAL

destroyed

destroyed: boolean

!INTERNAL

el

el: HTMLElement

Slider container HTML element

fadeEffect

fadeEffect: FadeEffectMethods

flipEffect

flipEffect: FlipEffectMethods

hashNavigation

hashNavigation: HashNavigationMethods

height

height: number

Height of container

history

history: HistoryMethods

isBeginning

isBeginning: boolean

true if slider on most "left"/"top" position

isEnd

isEnd: boolean

true if slider on most "right"/"bottom" position

keyboard

keyboard: KeyboardMethods

lazy

lazy: LazyMethods

loopedSlides

loopedSlides: null | number

!INTERNAL

modules

modules: any[]

!INTERNAL

mousewheel

mousewheel: MousewheelMethods

navigation

navigation: NavigationMethods

originalParams

originalParams: SwiperOptions

Object with original initialization parameters

pagination

pagination: PaginationMethods

parallax

parallax: ParallaxMethods

params

params: SwiperOptions

Object with passed initialization parameters

previousIndex

previousIndex: number

Index number of previously active slide

progress

progress: number

Current progress of wrapper translate (from 0 to 1)

realIndex

realIndex: number

Index number of currently active slide considering duplicated slides in loop mode

rtlTranslate

rtlTranslate: boolean

!INTERNAL

scrollbar

scrollbar: ScrollbarMethods

slides

slides: Dom7Array

Dom7 array-like collection of slides HTML elements. To get specific slide HTMLElement use swiper.slides[1]

thumbs

thumbs: ThumbsMethods

touches

touches: { currentX: number; currentY: number; diff: number; startX: number; startY: number }

Object with the following touch event properties:

swiper.touches.startX
swiper.touches.startY
swiper.touches.currentX
swiper.touches.currentY
swiper.touches.diff

Type declaration

currentX: number
currentY: number
diff: number
startX: number
startY: number

translate

translate: number

Current value of wrapper translate

virtual

virtual: VirtualMethods

width

width: number

Width of container

wrapperEl

wrapperEl: HTMLElement

Wrapper HTML element

zoom

zoom: ZoomMethods

Static defaults

defaults: SwiperOptions

Swiper default options

Static extendedDefaults

extendedDefaults: SwiperOptions

Object with global Swiper extended options

Methods

addSlide

addSlide(index: number, slides: string | HTMLElement | HTMLElement[] | string[]): void

- Defined in swiper/types/swiper-class.d.ts:382
Add new slides to the required index. slides could be HTMLElement or HTML string with new slide or array with such slides, for example:
example
```
addSlide(1, '<div class="swiper-slide">Slide 10"</div>')

addSlide(1, [
 '<div class="swiper-slide">Slide 10"</div>',
 '<div class="swiper-slide">Slide 11"</div>'
]);
```
Parameters
- index: number
- slides: string | HTMLElement | HTMLElement[] | string[]
Returns void

appendSlide

appendSlide(slides: string | HTMLElement | HTMLElement[] | string[]): void

- Defined in swiper/types/swiper-class.d.ts:351
Add new slides to the end. slides could be HTMLElement or HTML string with new slide or array with such slides, for example:
example
```
appendSlide('<div class="swiper-slide">Slide 10"</div>')

appendSlide([
 '<div class="swiper-slide">Slide 10"</div>',
 '<div class="swiper-slide">Slide 11"</div>'
]);
```
Parameters
- slides: string | HTMLElement | HTMLElement[] | string[]
Returns void

attachEvents

attachEvents(): void

- Defined in swiper/types/swiper-class.d.ts:311
Attach all events listeners again

Returns void

changeDirection

changeDirection(direction?: "horizontal" | "vertical", needUpdate?: boolean): void

- Defined in swiper/types/swiper-class.d.ts:301
Changes slider direction from horizontal to vertical and back.

Parameters
- Optional direction: "horizontal" | "vertical"
  
  New direction. If not specified, then will automatically changed to opposite direction
- Optional needUpdate: boolean
  
  Will call swiper.update(). Default true
Returns void

destroy

destroy(deleteInstance?: boolean, cleanStyles?: boolean): void

- Defined in swiper/types/swiper-class.d.ts:334
Destroy slider instance and detach all events listeners

Parameters
- Optional deleteInstance: boolean
  
  Set it to false (by default it is true) to not to delete Swiper instance
- Optional cleanStyles: boolean
  
  Set it to true (by default it is true) and all custom styles will be removed from slides, wrapper and container. Useful if you need to destroy Swiper and to init again with new options or in different direction
Returns void

detachEvents

detachEvents(): void

- Defined in swiper/types/swiper-class.d.ts:306
Detach all events listeners

Returns void

disable

disable(): void

- Defined in swiper/types/swiper-class.d.ts:183
Disable Swiper (if it was enabled). When Swiper is disabled, it will hide all navigation elements and won't respond to any events and interactions

Returns void

emit

emit<E>(event: E, ...args: any[]): void

Inherited from SwiperClass.emit
- Defined in swiper/types/swiper-class.d.ts:36
Fire event on instance

Type parameters
- E: keyof SwiperEvents
Parameters
- event: E
- Rest ...args: any[]
Returns void

enable

enable(): void

- Defined in swiper/types/swiper-class.d.ts:189
Enable Swiper (if it was disabled)

Returns void

getBreakpoint

getBreakpoint(breakpoints: undefined | {}): string

- Defined in swiper/types/swiper-class.d.ts:455
!INTERNAL

Parameters
- breakpoints: undefined | {}
Returns string

getTranslate

getTranslate(): any

- Defined in swiper/types/swiper-class.d.ts:409
Get current value of swiper wrapper css3 transform translate

Returns any

init

init(el?: HTMLElement): default

- Defined in swiper/types/swiper-class.d.ts:325
Initialize slider

Parameters
- Optional el: HTMLElement
Returns default

isHorizontal

isHorizontal(): boolean

- Defined in swiper/types/swiper-class.d.ts:450
!INTERNAL

Returns boolean

loopCreate

loopCreate(): void

- Defined in swiper/types/swiper-class.d.ts:320
!INTERNAL

Returns void

loopDestroy

loopDestroy(): void

- Defined in swiper/types/swiper-class.d.ts:316
!INTERNAL

Returns void

off

off<E>(event: E, handler: SwiperEvents[E]): void
off<E>(event: E): void

Inherited from SwiperClass.off
- Defined in swiper/types/swiper-class.d.ts:32
Remove event handler

Type parameters
- E: keyof SwiperEvents
Parameters
- event: E
- handler: SwiperEvents[E]
Returns void
Inherited from SwiperClass.off
- Defined in swiper/types/swiper-class.d.ts:34
Remove all handlers for specified event

Type parameters
- E: keyof SwiperEvents
Parameters
- event: E
Returns void

offAny

offAny(handler: (eventName: string, ...args: any[]) => void): void

- Defined in swiper/types/swiper-class.d.ts:445
Remove event listener that will be fired on all events

Parameters
- handler: (eventName: string, ...args: any[]) => void
  - - (eventName: string, ...args: any[]): void
    - Parameters
      - eventName: string
      - Rest ...args: any[]
      Returns void
Returns void

on

on<E>(event: E, handler: SwiperEvents[E]): void

Inherited from SwiperClass.on
- Defined in swiper/types/swiper-class.d.ts:28
Add event handler

Type parameters
- E: keyof SwiperEvents
Parameters
- event: E
- handler: SwiperEvents[E]
Returns void

onAny

onAny(handler: (eventName: string, ...args: any[]) => void): void

- Defined in swiper/types/swiper-class.d.ts:440
Add event listener that will be fired on all events

Parameters
- handler: (eventName: string, ...args: any[]) => void
  - - (eventName: string, ...args: any[]): void
    - Parameters
      - eventName: string
      - Rest ...args: any[]
      Returns void
Returns void

once

once<E>(event: E, handler: SwiperEvents[E]): void

Inherited from SwiperClass.once
- Defined in swiper/types/swiper-class.d.ts:30
Add event handler that will be removed after it was fired

Type parameters
- E: keyof SwiperEvents
Parameters
- event: E
- handler: SwiperEvents[E]
Returns void

prependSlide

prependSlide(slides: string | HTMLElement | HTMLElement[] | string[]): void

- Defined in swiper/types/swiper-class.d.ts:367
Add new slides to the beginning. slides could be HTMLElement or HTML string with new slide or array with such slides, for example:
example
```
prependSlide('<div class="swiper-slide">Slide 0"</div>')

prependSlide([
 '<div class="swiper-slide">Slide 1"</div>',
 '<div class="swiper-slide">Slide 2"</div>'
]);
```
Parameters
- slides: string | HTMLElement | HTMLElement[] | string[]
Returns void

removeAllSlides

removeAllSlides(): void

- Defined in swiper/types/swiper-class.d.ts:399
Remove all slides

Returns void

removeSlide

removeSlide(slideIndex: number | number[]): void

- Defined in swiper/types/swiper-class.d.ts:394
Remove selected slides. slideIndex could be a number with slide index to remove or array with indexes.
example
```
removeSlide(0); // remove first slide
removeSlide([0, 1]); // remove first and second slides
removeAllSlides();    // Remove all slides
```
Parameters
- slideIndex: number | number[]
Returns void

setBreakpoint

setBreakpoint(): void

- Defined in swiper/types/swiper-class.d.ts:460
!INTERNAL

Returns void

setGrabCursor

setGrabCursor(): void

- Defined in swiper/types/swiper-class.d.ts:435
Set grab cursor

Returns void

setProgress

setProgress(progress: number, speed?: number): void

- Defined in swiper/types/swiper-class.d.ts:197
Set Swiper translate progress (from 0 to 1). Where 0 - its initial position (offset) on first slide, and 1 - its maximum position (offset) on last slide

Parameters
- progress: number
  
  Swiper translate progress (from 0 to 1).
- Optional speed: number
  
  Transition duration (in ms).
Returns void

setTranslate

setTranslate(translate: any): void

- Defined in swiper/types/swiper-class.d.ts:404
Set custom css3 transform's translate value for swiper wrapper

Parameters
- translate: any
Returns void

slideNext

slideNext(speed?: number, runCallbacks?: boolean): void

- Defined in swiper/types/swiper-class.d.ts:206
Run transition to next slide.

Parameters
- Optional speed: number
  
  Transition duration (in ms).
- Optional runCallbacks: boolean
  
  Set it to false (by default it is true) and transition will not produce transition events.
Returns void

slidePrev

slidePrev(speed?: number, runCallbacks?: boolean): void

- Defined in swiper/types/swiper-class.d.ts:215
Run transition to previous slide.

Parameters
- Optional speed: number
  
  Transition duration (in ms).
- Optional runCallbacks: boolean
  
  Set it to false (by default it is true) and transition will not produce transition events.
Returns void

slideReset

slideReset(speed?: number, runCallbacks?: boolean): void

- Defined in swiper/types/swiper-class.d.ts:247
Reset swiper position to currently active slide for the duration equal to 'speed' parameter.

Parameters
- Optional speed: number
  
  Transition duration (in ms).
- Optional runCallbacks: boolean
  
  Set it to false (by default it is true) and transition will not produce transition events.
Returns void

slideTo

slideTo(index: number, speed?: number, runCallbacks?: boolean): void

- Defined in swiper/types/swiper-class.d.ts:226
Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter.

Parameters
- index: number
  
  Index number of slide.
- Optional speed: number
  
  Transition duration (in ms).
- Optional runCallbacks: boolean
  
  Set it to false (by default it is true) and transition will not produce transition events.
Returns void

slideToClosest

slideToClosest(speed?: number, runCallbacks?: boolean): void

- Defined in swiper/types/swiper-class.d.ts:256
Reset swiper position to closest slide/snap point for the duration equal to 'speed' parameter.

Parameters
- Optional speed: number
  
  Transition duration (in ms).
- Optional runCallbacks: boolean
  
  Set it to false (by default it is true) and transition will not produce transition events.
Returns void

slideToLoop

slideToLoop(index: number, speed?: number, runCallbacks?: boolean): void

- Defined in swiper/types/swiper-class.d.ts:237
Does the same as .slideTo but for the case when used with enabled loop. So this method will slide to slides with realIndex matching to passed index

Parameters
- index: number
  
  Index number of slide.
- Optional speed: number
  
  Transition duration (in ms).
- Optional runCallbacks: boolean
  
  Set it to false (by default it is true) and transition will not produce transition events.
Returns void

translateTo

translateTo(translate: number, speed: number, runCallbacks?: boolean, translateBounds?: boolean): any

- Defined in swiper/types/swiper-class.d.ts:420
Animate custom css3 transform's translate value for swiper wrapper

Parameters
- translate: number
  
  Translate value (in px)
- speed: number
  
  Transition duration (in ms)
- Optional runCallbacks: boolean
  
  Set it to false (by default it is true) and transition will not produce transition events
- Optional translateBounds: boolean
  
  Set it to false (by default it is true) and transition value can extend beyond min and max translate
Returns any

unsetGrabCursor

unsetGrabCursor(): void

- Defined in swiper/types/swiper-class.d.ts:430
Unset grab cursor

Returns void

update

update(): void

- Defined in swiper/types/swiper-class.d.ts:273
You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with Swiper This method also includes subcall of the following methods which you can use separately:

Returns void

updateAutoHeight

updateAutoHeight(speed?: number): void

- Defined in swiper/types/swiper-class.d.ts:264
Force swiper to update its height (when autoHeight enabled) for the duration equal to 'speed' parameter

Parameters
- Optional speed: number
  
  Transition duration (in ms).
Returns void

updateProgress

updateProgress(): void

- Defined in swiper/types/swiper-class.d.ts:288
recalculate swiper progress

Returns void

updateSize

updateSize(): void

- Defined in swiper/types/swiper-class.d.ts:278
recalculate size of swiper container

Returns void

updateSlides

updateSlides(): void

- Defined in swiper/types/swiper-class.d.ts:283
recalculate number of slides and their offsets. Useful after you add/remove slides with JavaScript

Returns void

updateSlidesClasses

updateSlidesClasses(): void

- Defined in swiper/types/swiper-class.d.ts:293
update active/prev/next classes on slides and bullets

Returns void

Static extendDefaults

extendDefaults(options: SwiperOptions): void

- Defined in swiper/types/swiper-class.d.ts:519
Extend global Swiper defaults

Parameters
- options: SwiperOptions
Returns void

Static use

use(modules: SwiperComponent[]): void

- Defined in swiper/types/swiper-class.d.ts:509
Installs modules on Swiper in runtime.

Parameters
- modules: SwiperComponent[]
Returns void

Hierarchy

Implements

Implemented by

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

container: HTMLElement | CSSSelector

Optional options: SwiperOptions

Returns default

Properties

$el

$wrapperEl

a11y

activeIndex

allowSlideNext

allowSlidePrev

allowTouchMove

animating

autoplay

clickedIndex

clickedSlide

controller

coverflowEffect

cubeEffect

currentBreakpoint

destroyed

el

fadeEffect

flipEffect

hashNavigation

height

history

isBeginning

isEnd

keyboard

lazy

loopedSlides

modules

mousewheel

navigation

originalParams

pagination

parallax

params

previousIndex

progress

realIndex

rtlTranslate

scrollbar

slides

thumbs

touches

Type declaration

currentX: number

currentY: number

diff: number

startX: number

startY: number

translate

virtual

width

wrapperEl

zoom

Static defaults

Static extendedDefaults

Methods

addSlide

Parameters

index: number

slides: string | HTMLElement | HTMLElement[] | string[]

Returns void

appendSlide

Parameters

slides: string | HTMLElement | HTMLElement[] | string[]

Returns void

attachEvents