default | Swiper

Index

Constructors

constructor

Properties

Methods

Constructors

constructor

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

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

Parameters
- container: CSSSelector | HTMLElement
  
  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

cardsEffect

cardsEffect: CardsEffectMethods

clickedIndex

clickedIndex: number

Index number of last clicked slide

clickedSlide

clickedSlide: HTMLElement

Link to last clicked slide (HTMLElement)

controller

controller: ControllerMethods

coverflowEffect

coverflowEffect: CoverflowEffectMethods

creativeEffect

creativeEffect: CreativeEffectMethods

cubeEffect

cubeEffect: CubeEffectMethods

currentBreakpoint

currentBreakpoint: any

!INTERNAL

destroyed

destroyed: boolean

!INTERNAL

el

el: HTMLElement

Slider container HTML element

fadeEffect

fadeEffect: FadeEffectMethods

flipEffect

flipEffect: FlipEffectMethods

freeMode

freeMode: FreeModeMethods

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: SwiperModule[]

!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 | string[] | HTMLElement[]): void

- Defined in swiper/types/modules/manipulation.d.ts:48
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 | string[] | HTMLElement[]
Returns void

appendSlide

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

- Defined in swiper/types/modules/manipulation.d.ts:17
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 | string[] | HTMLElement[]
Returns void

attachEvents

attachEvents(): void

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

Returns void

changeDirection

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

- Defined in swiper/types/swiper-class.d.ts:305
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:339
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:310
Detach all events listeners

Returns void

disable

disable(): void

- Defined in swiper/types/swiper-class.d.ts:187
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:40
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:193
Enable Swiper (if it was disabled)

Returns void

getBreakpoint

getBreakpoint(breakpoints: undefined | {}): string

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

Parameters
- breakpoints: undefined | {}
Returns string

getTranslate

getTranslate(): any

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

Returns any

init

init(el?: HTMLElement): default

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

Parameters
- Optional el: HTMLElement
Returns default

isHorizontal

isHorizontal(): boolean

- Defined in swiper/types/swiper-class.d.ts:390
!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:325
!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:36
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:38
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:385
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:32
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:380
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:34
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 | string[] | HTMLElement[]): void

- Defined in swiper/types/modules/manipulation.d.ts:33
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 | string[] | HTMLElement[]
Returns void

removeAllSlides

removeAllSlides(): void

- Defined in swiper/types/modules/manipulation.d.ts:65
Remove all slides

Returns void

removeSlide

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

- Defined in swiper/types/modules/manipulation.d.ts:60
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:400
!INTERNAL

Returns void

setGrabCursor

setGrabCursor(): void

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

Returns void

setProgress

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

- Defined in swiper/types/swiper-class.d.ts:201
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:344
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:210
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:219
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:251
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:230
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:260
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:241
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:360
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:370
Unset grab cursor

Returns void

update

update(): void

- Defined in swiper/types/swiper-class.d.ts:277
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:268
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:292
recalculate swiper progress

Returns void

updateSize

updateSize(): void

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

Returns void

updateSlides

updateSlides(): void

- Defined in swiper/types/swiper-class.d.ts:287
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:297
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:464
Extend global Swiper defaults

Parameters
- options: SwiperOptions
Returns void

Static use

use(modules: SwiperModule[]): void

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

Parameters
- modules: SwiperModule[]
Returns void

Hierarchy

Implements

Implemented by

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

container: CSSSelector | HTMLElement

Optional options: SwiperOptions

Returns default

Properties

$el

$wrapperEl

a11y

activeIndex

allowSlideNext

allowSlidePrev

allowTouchMove

animating

autoplay

cardsEffect

clickedIndex

clickedSlide

controller

coverflowEffect

creativeEffect

cubeEffect

currentBreakpoint

destroyed

el

fadeEffect

flipEffect

freeMode

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 | string[] | HTMLElement[]

Returns void

appendSlide

Parameters