Options
All
  • Public
  • Public/Protected
  • All
Menu

Hierarchy

Implements

Implemented by

Index

Constructors

constructor

  • Constructs a new Swiper instance.

    Parameters

    Returns default

Properties

a11y

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

fadeEffect

fadeEffect: FadeEffectMethods

flipEffect

flipEffect: FlipEffectMethods

freeMode

freeMode: FreeModeMethods

hashNavigation

hashNavigation: HashNavigationMethods

height

height: number

Height of container

history

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

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]

snapGrid

snapGrid: number[]

Slides snap grid

snapIndex

snapIndex: number

Index number of current snap in snapGrid

swipeDirection

swipeDirection: "prev" | "next"

Direction of sliding

thumbs

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

width

width: number

Width of container

wrapperEl

wrapperEl: HTMLElement

Wrapper HTML element

zoom

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:

    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
  • 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
  • Attach all events listeners again

    Returns void

changeDirection

  • changeDirection(direction?: "horizontal" | "vertical", needUpdate?: boolean): void
  • 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

changeLanguageDirection

  • changeLanguageDirection(direction: "rtl" | "ltr"): void
  • Changes slider language

    Parameters

    • direction: "rtl" | "ltr"

      New direction. Should be rtl or ltr

    Returns void

destroy

  • destroy(deleteInstance?: boolean, cleanStyles?: boolean): void
  • 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
  • Detach all events listeners

    Returns void

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

emit

  • emit<E>(event: E, ...args: any[]): void
  • Fire event on instance

    Type parameters

    Parameters

    • event: E
    • Rest ...args: any[]

    Returns void

enable

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

    Returns void

getBreakpoint

  • getBreakpoint(breakpoints: undefined | {}): string
  • !INTERNAL

    Parameters

    • breakpoints: undefined | {}

    Returns string

getTranslate

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

    Returns any

init

  • Initialize slider

    Parameters

    • Optional el: HTMLElement

    Returns default

isHorizontal

  • isHorizontal(): boolean
  • !INTERNAL

    Returns boolean

loopCreate

  • loopCreate(): void
  • !INTERNAL

    Returns void

loopDestroy

  • loopDestroy(): void
  • !INTERNAL

    Returns void

off

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

    Type parameters

    Parameters

    Returns void

  • Remove all handlers for specified event

    Type parameters

    Parameters

    • event: E

    Returns void

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
        • (eventName: string, ...args: any[]): void
        • Parameters

          • eventName: string
          • Rest ...args: any[]

          Returns void

    Returns void

on

  • Add event handler

    Type parameters

    Parameters

    Returns void

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
        • (eventName: string, ...args: any[]): void
        • Parameters

          • eventName: string
          • Rest ...args: any[]

          Returns void

    Returns void

once

  • Add event handler that will be removed after it was fired

    Type parameters

    Parameters

    Returns void

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:

    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
  • Remove all slides

    Returns void

removeSlide

  • removeSlide(slideIndex: number | number[]): void
  • 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
  • !INTERNAL

    Returns void

setGrabCursor

  • setGrabCursor(): void
  • Set grab cursor

    Returns void

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

    • Optional speed: number

      Transition duration (in ms).

    Returns void

setTranslate

  • setTranslate(translate: any): void
  • Set custom css3 transform's translate value for swiper wrapper

    Parameters

    • translate: any

    Returns void

slideNext

  • slideNext(speed?: number, runCallbacks?: boolean): void
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Unset grab cursor

    Returns void

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

updateAutoHeight

  • updateAutoHeight(speed?: number): void
  • 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
  • recalculate swiper progress

    Returns void

updateSize

  • updateSize(): void
  • recalculate size of swiper container

    Returns void

updateSlides

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

    Returns void

updateSlidesClasses

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

    Returns void

Static extendDefaults

  • Extend global Swiper defaults

    Parameters

    Returns void

Static use

  • Installs modules on Swiper in runtime.

    Parameters

    Returns void

Generated using TypeDoc