Class SwiperClass

Index

Constructors

constructor

Constructors

constructor

new SwiperClass(
container: HTMLElement | CSSSelector,
options?: SwiperOptions,
): SwiperClass
Constructs a new Swiper instance.
Parameters
- container: HTMLElement | CSSSelector
  Where Swiper applies to.
- Optionaloptions: SwiperOptions
  Instance options.
Returns SwiperClass
Inherited from SwiperClass<SwiperEvents>.constructor
- Defined in swiper/types/swiper-class.d.ts:500

Properties

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 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

enabled

enabled: boolean

true if Swiper is enabled, false otherwise

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

isLocked

isLocked: boolean

true if slide is "locked" (by watchOverflow) and slides can not be, e.g. when amount of slides is less that slides per view

keyboard

keyboard: KeyboardMethods

loopedSlides

loopedSlides: number | null

!INTERNAL

modules

modules: SwiperModule[]

!INTERNAL

mousewheel

mousewheel: MousewheelMethods

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 rearranged slides in loop mode

rtlTranslate

rtlTranslate: boolean

!INTERNAL

scrollbar

scrollbar: ScrollbarMethods

slides

slides: HTMLElement[]

Array of slides HTML elements. To get specific slide HTMLElement use swiper.slides[1]

slidesEl

slidesEl: HTMLElement

Wrapper HTML element

slidesGrid

slidesGrid: number[]

Slides grid

slidesSizesGrid

slidesSizesGrid: number[]

Array of widths for slides

snapGrid

snapGrid: number[]

Slides snap grid

snapIndex

snapIndex: number

Index number of current snap in snapGrid

swipeDirection

swipeDirection: "next" | "prev"

Direction of sliding

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

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
Add new slides to the required index. slides could be HTMLElement or HTML string with new slide or array with such slides, for example:
Parameters
- index: number
- slides: string | HTMLElement | string[] | HTMLElement[]
Returns void
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>'
]);
```
- Defined in swiper/types/modules/manipulation.d.ts:48

appendSlide

appendSlide(slides: string | HTMLElement | string[] | HTMLElement[]): void
Add new slides to the end. slides could be HTMLElement or HTML string with new slide or array with such slides, for example:
Parameters
- slides: string | HTMLElement | string[] | HTMLElement[]
Returns void
Example
```
appendSlide('<div class="swiper-slide">Slide 10"</div>')

appendSlide([
 '<div class="swiper-slide">Slide 10"</div>',
 '<div class="swiper-slide">Slide 11"</div>'
]);
```
- Defined in swiper/types/modules/manipulation.d.ts:17

attachEvents

attachEvents(): void
Attach all events listeners again

Returns void
- Defined in swiper/types/swiper-class.d.ts:356

changeDirection

changeDirection(
direction?: "horizontal" | "vertical",
needUpdate?: boolean,
): void
Changes slider direction from horizontal to vertical and back.
Parameters
- Optionaldirection: "horizontal" | "vertical"
  New direction. If not specified, then will automatically changed to opposite direction
- OptionalneedUpdate: boolean
  Will call swiper.update(). Default true
Returns void
- Defined in swiper/types/swiper-class.d.ts:339

changeLanguageDirection

changeLanguageDirection(direction: "rtl" | "ltr"): void
Changes slider language
Parameters
- direction: "rtl" | "ltr"
  New direction. Should be rtl or ltr
Returns void
- Defined in swiper/types/swiper-class.d.ts:346

destroy

destroy(deleteInstance?: boolean, cleanStyles?: boolean): void
Destroy slider instance and detach all events listeners
Parameters
- OptionaldeleteInstance: boolean
  Set it to false (by default it is true) to not to delete Swiper instance
- OptionalcleanStyles: 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
- Defined in swiper/types/swiper-class.d.ts:380

detachEvents

detachEvents(): void
Detach all events listeners

Returns void
- Defined in swiper/types/swiper-class.d.ts:351

disable

disable(): void
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
- Defined in swiper/types/swiper-class.d.ts:215

emit

emit<E extends keyof SwiperEvents>(event: E, ...args: any[]): void
Fire event on instance
Type Parameters
- E extends keyof SwiperEvents
Parameters
- event: E
- ...args: any[]
Returns void
Inherited from SwiperClass.emit
- Defined in swiper/types/swiper-class.d.ts:38

enable

enable(): void
Enable Swiper (if it was disabled)

Returns void
- Defined in swiper/types/swiper-class.d.ts:221

getBreakpoint

getBreakpoint(
    breakpoints:
        | { [width: number]: SwiperOptions; [ratio: string]: SwiperOptions }
        | undefined,
): string
!INTERNAL
Parameters
- breakpoints: { [width: number]: SwiperOptions; [ratio: string]: SwiperOptions } | undefined
Returns string
- Defined in swiper/types/swiper-class.d.ts:446

getTranslate

getTranslate(): any
Get current value of swiper wrapper css3 transform translate

Returns any
- Defined in swiper/types/swiper-class.d.ts:390

init

init(el?: HTMLElement): SwiperClass
Initialize slider
Parameters
- Optionalel: HTMLElement
Returns SwiperClass
- Defined in swiper/types/swiper-class.d.ts:371

isHorizontal

isHorizontal(): boolean
!INTERNAL

Returns boolean
- Defined in swiper/types/swiper-class.d.ts:441

loopCreate

loopCreate(): void
!INTERNAL

Returns void
- Defined in swiper/types/swiper-class.d.ts:361

loopDestroy

loopDestroy(): void
!INTERNAL

Returns void
- Defined in swiper/types/swiper-class.d.ts:366

maxTranslate

maxTranslate(): number
Get current maximal translate value

Returns number
- Defined in swiper/types/swiper-class.d.ts:416

minTranslate

minTranslate(): number
Get current minimal translate value

Returns number
- Defined in swiper/types/swiper-class.d.ts:411

off

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

offAny

offAny(handler: (eventName: string, ...args: any[]) => void): void
Remove event listener that will be fired on all events
Parameters
- handler: (eventName: string, ...args: any[]) => void
Returns void
- Defined in swiper/types/swiper-class.d.ts:436

on

on<E extends keyof SwiperEvents>(event: E, handler: SwiperEvents[E]): void
Add event handler
Type Parameters
- E extends keyof SwiperEvents
Parameters
- event: E
- handler: SwiperEvents[E]
Returns void
Inherited from SwiperClass.on
- Defined in swiper/types/swiper-class.d.ts:30

onAny

onAny(handler: (eventName: string, ...args: any[]) => void): void
Add event listener that will be fired on all events
Parameters
- handler: (eventName: string, ...args: any[]) => void
Returns void
- Defined in swiper/types/swiper-class.d.ts:431

once

once<E extends keyof SwiperEvents>(event: E, handler: SwiperEvents[E]): void
Add event handler that will be removed after it was fired
Type Parameters
- E extends keyof SwiperEvents
Parameters
- event: E
- handler: SwiperEvents[E]
Returns void
Inherited from SwiperClass.once
- Defined in swiper/types/swiper-class.d.ts:32

prependSlide

prependSlide(slides: string | HTMLElement | string[] | HTMLElement[]): void
Add new slides to the beginning. slides could be HTMLElement or HTML string with new slide or array with such slides, for example:
Parameters
- slides: string | HTMLElement | string[] | HTMLElement[]
Returns void
Example
```
prependSlide('<div class="swiper-slide">Slide 0"</div>')

prependSlide([
 '<div class="swiper-slide">Slide 1"</div>',
 '<div class="swiper-slide">Slide 2"</div>'
]);
```
- Defined in swiper/types/modules/manipulation.d.ts:33

removeAllSlides

removeAllSlides(): void
Remove all slides

Returns void
- Defined in swiper/types/modules/manipulation.d.ts:65

removeSlide

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

setBreakpoint

setBreakpoint(): void
!INTERNAL

Returns void
- Defined in swiper/types/swiper-class.d.ts:451

setGrabCursor

setGrabCursor(): void
Set grab cursor

Returns void
- Defined in swiper/types/swiper-class.d.ts:426

setProgress

setProgress(progress: number, speed?: number): void
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).
- Optionalspeed: number
  Transition duration (in ms).
Returns void
- Defined in swiper/types/swiper-class.d.ts:229

setTranslate

setTranslate(translate: any): void
Set custom css3 transform's translate value for swiper wrapper
Parameters
- translate: any
Returns void
- Defined in swiper/types/swiper-class.d.ts:385

slideNext

slideNext(speed?: number, runCallbacks?: boolean): boolean
Run transition to next slide.
Parameters
- Optionalspeed: number
  Transition duration (in ms).
- OptionalrunCallbacks: boolean
  Set it to false (by default it is true) and transition will not produce transition events.
Returns boolean
- Defined in swiper/types/swiper-class.d.ts:238

slidePrev

slidePrev(speed?: number, runCallbacks?: boolean): boolean
Run transition to previous slide.
Parameters
- Optionalspeed: number
  Transition duration (in ms).
- OptionalrunCallbacks: boolean
  Set it to false (by default it is true) and transition will not produce transition events.
Returns boolean
- Defined in swiper/types/swiper-class.d.ts:247

slideReset

slideReset(speed?: number, runCallbacks?: boolean): boolean
Reset swiper position to currently active slide for the duration equal to 'speed' parameter.
Parameters
- Optionalspeed: number
  Transition duration (in ms).
- OptionalrunCallbacks: boolean
  Set it to false (by default it is true) and transition will not produce transition events.
Returns boolean
- Defined in swiper/types/swiper-class.d.ts:279

slidesPerViewDynamic

slidesPerViewDynamic(): number
Get dynamically calculated amount of slides per view, useful only when slidesPerView set to auto

Returns number
- Defined in swiper/types/swiper-class.d.ts:294

slideTo

slideTo(index: number, speed?: number, runCallbacks?: boolean): boolean
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.
- Optionalspeed: number
  Transition duration (in ms).
- OptionalrunCallbacks: boolean
  Set it to false (by default it is true) and transition will not produce transition events.
Returns boolean
- Defined in swiper/types/swiper-class.d.ts:258

slideToClosest

slideToClosest(speed?: number, runCallbacks?: boolean): boolean
Reset swiper position to closest slide/snap point for the duration equal to 'speed' parameter.
Parameters
- Optionalspeed: number
  Transition duration (in ms).
- OptionalrunCallbacks: boolean
  Set it to false (by default it is true) and transition will not produce transition events.
Returns boolean
- Defined in swiper/types/swiper-class.d.ts:288

slideToLoop

slideToLoop(index: number, speed?: number, runCallbacks?: boolean): SwiperClass
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.
- Optionalspeed: number
  Transition duration (in ms).
- OptionalrunCallbacks: boolean
  Set it to false (by default it is true) and transition will not produce transition events.
Returns SwiperClass
- Defined in swiper/types/swiper-class.d.ts:269

translateTo

translateTo(
    translate: number,
    speed: number,
    runCallbacks?: boolean,
    translateBounds?: boolean,
): any
Animate custom css3 transform's translate value for swiper wrapper
Parameters
- translate: number
  Translate value (in px)
- speed: number
  Transition duration (in ms)
- OptionalrunCallbacks: boolean
  Set it to false (by default it is true) and transition will not produce transition events
- OptionaltranslateBounds: boolean
  Set it to false (by default it is true) and transition value can extend beyond min and max translate
Returns any
- Defined in swiper/types/swiper-class.d.ts:401

unsetGrabCursor

unsetGrabCursor(): void
Unset grab cursor

Returns void
- Defined in swiper/types/swiper-class.d.ts:421

update

update(): void
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
- Defined in swiper/types/swiper-class.d.ts:311

updateAutoHeight

updateAutoHeight(speed?: number): void
Force swiper to update its height (when autoHeight enabled) for the duration equal to 'speed' parameter
Parameters
- Optionalspeed: number
  Transition duration (in ms).
Returns void
- Defined in swiper/types/swiper-class.d.ts:302

updateProgress

updateProgress(): void
recalculate swiper progress

Returns void
- Defined in swiper/types/swiper-class.d.ts:326

updateSize

updateSize(): void
recalculate size of swiper container

Returns void
- Defined in swiper/types/swiper-class.d.ts:316

updateSlides

updateSlides(): void
recalculate number of slides and their offsets. Useful after you add/remove slides with JavaScript

Returns void
- Defined in swiper/types/swiper-class.d.ts:321

updateSlidesClasses

updateSlidesClasses(): void
update active/prev/next classes on slides and bullets

Returns void
- Defined in swiper/types/swiper-class.d.ts:331

`Static`extendDefaults

extendDefaults(options: SwiperOptions): void
Extend global Swiper defaults
Parameters
- options: SwiperOptions
Returns void
- Defined in swiper/types/swiper-class.d.ts:514

`Static`use

use(modules: SwiperModule[]): void
Installs modules on Swiper in runtime.
Parameters
- modules: SwiperModule[]
Returns void
- Defined in swiper/types/swiper-class.d.ts:504

Class SwiperClass

Hierarchy (View Summary)

Implements

Implemented by

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns SwiperClass

Properties

a11y

activeIndex

Note

allowSlideNext

allowSlidePrev

allowTouchMove

animating

autoplay

cardsEffect

clickedIndex

clickedSlide

controller

coverflowEffect

creativeEffect

cubeEffect

currentBreakpoint

destroyed

el

enabled

fadeEffect

flipEffect

freeMode

hashNavigation

height

history

isBeginning

isEnd

isLocked

keyboard

loopedSlides

modules

mousewheel

navigation

originalParams

pagination

parallax

params

previousIndex

progress

realIndex

rtlTranslate

scrollbar

slides

slidesEl

slidesGrid

slidesSizesGrid

snapGrid

snapIndex

swipeDirection

thumbs

touches

translate

virtual

width

wrapperEl

zoom

Staticdefaults

StaticextendedDefaults

Methods

addSlide

Parameters

Returns void

Example

appendSlide

Parameters

Returns void

Example

`Static`defaults

`Static`extendedDefaults