Swiper - v14.0.1
    Preparing search index...

    Class Swiper

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    __modules__? __preventObserver__? __swiper__ _clientLeft? _cssModeVirtualInitialSet? _immediateVirtual? a11y activeIndex allowClick allowSlideNext allowSlidePrev allowTouchMove animating autoplay browser cardsEffect classNames clickedIndex clickedSlide controller coverflowEffect creativeEffect cubeEffect currentBreakpoint? destroyed? device documentTouchHandlerProceeded? el enabled eventsAnyListeners eventsListeners fadeEffect flipEffect freeMode grid hashNavigation height history hostEl imagesLoaded imagesToLoad initialized? isBeginning isElement? isEnd isLocked keyboard loopedSlides modules mounted? mousewheel navigation onClick onDocumentTouchStart onLoad onScroll onSlideToWrapperTransitionEnd? onTouchEnd onTouchMove onTouchStart onTranslateToWrapperTransitionEnd? originalParams pagination parallax? params passedParams previousIndex previousRealIndex? previousSnapIndex? previousTranslate progress progressLoop? realIndex rtl rtlTranslate scrollbar size slides slidesEl slidesGrid slidesSizesGrid snapGrid snapIndex support swipeDirection thumbs touches touchesDirection? touchEventsData translate velocity virtual virtualSize visibleSlides visibleSlidesIndexes width wrapperEl wrongRTL zoom defaults extendedDefaults

    Methods

    addClasses addSlide appendSlide attachEvents changeDirection changeLanguageDirection checkOverflow cssOverflowAdjustment destroy detachEvents disable emit emitContainerClasses emitSlidesClasses enable getBreakpoint getDirectionLabel getSlideClasses getSlideIndex getSlideIndexByData getSlideIndexWhenGrid getTranslate init isHorizontal isVertical loopCreate loopDestroy loopFix maxTranslate minTranslate mount off offAny on onAny once prependSlide recalcSlides removeAllSlides removeClasses removeSlide setBreakpoint setGrabCursor setProgress setTransition setTranslate slideNext slidePrev slideReset slidesPerViewDynamic slideTo slideToClickedSlide slideToClosest slideToLoop transitionEnd transitionStart translateTo unsetGrabCursor update updateActiveIndex updateAutoHeight updateClickedSlide updateProgress updateSize updateSlides updateSlidesClasses updateSlidesOffset updateSlidesProgress extendDefaults installModule use

    Constructors

    Properties

    Optional__modules__

    __modules__?: SwiperModule[]

    Optional__preventObserver__

    __preventObserver__?: boolean

    __swiper__

    __swiper__: true

    Optional_clientLeft

    _clientLeft?: number

    Optional_cssModeVirtualInitialSet

    _cssModeVirtualInitialSet?: boolean

    Optional_immediateVirtual

    _immediateVirtual?: boolean
    a11y: A11yInternals
    activeIndex: number

    Index number of currently active slide

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

    allowClick: boolean
    allowSlideNext: boolean

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

    allowSlidePrev: boolean

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

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

    true if swiper is in transition

    autoplay: AutoplayMethods
    browser: SwiperBrowser
    cardsEffect: CardsEffectMethods
    classNames: string[]
    clickedIndex: number | undefined

    Index number of last clicked slide

    clickedSlide: SwiperSlideElement | undefined

    Link to last clicked slide (HTMLElement)

    controller: ControllerInternals
    coverflowEffect: CoverflowEffectMethods
    creativeEffect: CreativeEffectMethods
    cubeEffect: CubeEffectMethods
    currentBreakpoint?: string | null

    !INTERNAL

    destroyed?: boolean

    !INTERNAL

    device: SwiperDevice
    documentTouchHandlerProceeded?: boolean
    el: HTMLElement

    Slider container HTML element

    enabled: boolean

    true if Swiper is enabled, false otherwise

    eventsAnyListeners: SwiperEventHandler[]
    eventsListeners: Record<string, SwiperEventHandler[]>
    fadeEffect: FadeEffectMethods
    flipEffect: FlipEffectMethods
    freeMode: FreeModeInternals
    grid: GridMethods
    hashNavigation: HashNavigationMethods
    height: number

    Height of container

    history: HistoryMethods
    hostEl: HTMLElement
    imagesLoaded: number
    imagesToLoad: HTMLImageElement[]
    initialized?: boolean
    isBeginning: boolean

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

    isElement?: boolean
    isEnd: boolean

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

    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: KeyboardMethods
    loopedSlides: number | null

    !INTERNAL

    modules: SwiperModule[]

    !INTERNAL

    mounted?: boolean
    mousewheel: MousewheelInternals
    navigation: NavigationInternals
    onClick: (event: MouseEvent) => void
    onDocumentTouchStart: (event: PointerEvent | TouchEvent) => void
    onLoad: (event: Event) => void
    onScroll: () => void
    onSlideToWrapperTransitionEnd?:
        | ((this: HTMLElement, e: TransitionEvent) => void)
        | null
    onTouchEnd: (event: PointerEvent | MouseEvent | TouchEvent) => void
    onTouchMove: (event: PointerEvent | MouseEvent | TouchEvent) => void
    onTouchStart: (event: PointerEvent | MouseEvent | TouchEvent) => void
    onTranslateToWrapperTransitionEnd?:
        | ((this: HTMLElement, e: TransitionEvent) => void)
        | null
    originalParams: SwiperParams

    Object with original initialization parameters

    pagination: PaginationInternals
    parallax?: ParallaxMethods
    params: SwiperParams

    Object with passed initialization parameters

    passedParams: SwiperParams
    previousIndex: number

    Index number of previously active slide

    previousRealIndex?: number
    previousSnapIndex?: number
    previousTranslate: number
    progress: number

    Current progress of wrapper translate (from 0 to 1)

    progressLoop?: number
    realIndex: number

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

    rtl: boolean
    rtlTranslate: boolean

    !INTERNAL

    scrollbar: ScrollbarInternals
    size: number
    slides: SwiperSlideElement[]

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

    slidesEl: HTMLElement

    Slides wrapper HTML element

    slidesGrid: number[]

    Slides grid

    slidesSizesGrid: number[]

    Array of widths for slides

    snapGrid: number[]

    Slides snap grid

    snapIndex: number

    Index number of current snap in snapGrid

    support: SwiperSupport
    swipeDirection: "next" | "prev" | undefined

    Direction of sliding

    thumbs: ThumbsInternals
    touches: SwiperTouches

    Object with the following touch event properties:

    • swiper.touches.startX
    • swiper.touches.startY
    • swiper.touches.currentX
    • swiper.touches.currentY
    • swiper.touches.diff
    touchesDirection?: "" | "next" | "prev"
    touchEventsData: SwiperTouchEventsData
    translate: number

    Current value of wrapper translate

    velocity: number
    virtual: VirtualInternals
    virtualSize: number
    visibleSlides: SwiperSlideElement[]
    visibleSlidesIndexes: number[]
    width: number

    Width of container

    wrapperEl: HTMLElement

    Wrapper HTML element

    wrongRTL: boolean
    zoom: ZoomMethods
    defaults: SwiperOptions
    extendedDefaults: SwiperOptions

    Methods

    • Returns 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: SlideInput

      Returns void

      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>'
      ]);

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

      Returns void

      appendSlide('<div class="swiper-slide">Slide 10"</div>')

      appendSlide([
       '<div class="swiper-slide">Slide 10"</div>',
       '<div class="swiper-slide">Slide 11"</div>'
      ]);

    • Attach all events listeners again

      Returns void

    • Changes slider direction from horizontal to vertical and back.

      Parameters

      • this: Swiper
      • OptionalnewDirection: "horizontal" | "vertical"
      • OptionalneedUpdate: boolean

        Will call swiper.update(). Default true

      Returns Swiper

    • Changes slider language

      Parameters

      • this: Swiper
      • direction: "rtl" | "ltr"

        New direction. Should be rtl or ltr

      Returns void

    • Returns void

    • Returns number

    • Destroy slider instance and detach all events listeners

      Parameters

      • this: Swiper
      • 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 null

    • Detach all events listeners

      Returns 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

      Parameters

      Returns void

    • Fire event on instance

      Parameters

      • events: string | string[]
      • ...data: any[]

      Returns Swiper

    • Parameters

      • opts: { context?: any; data?: any[]; events: string | string[] }

      Returns Swiper

    • Parameters

      Returns void

    • Parameters

      Returns void

    • Enable Swiper (if it was disabled)

      Parameters

      Returns void

    • !INTERNAL

      Parameters

      • breakpoints: { [width: number]: SwiperOptions; [ratio: string]: SwiperOptions } | undefined
      • Optionalbase: string
      • OptionalcontainerEl: HTMLElement

      Returns string

    • Parameters

      Returns string

    • Parameters

      • slideEl: Element

      Returns string

    • Parameters

      • slideEl: Element

      Returns number

    • Parameters

      • index: number

      Returns number

    • Parameters

      • index: number

      Returns number

    • Get current value of swiper wrapper css3 transform translate

      Parameters

      • Optionalaxis: "x" | "y"

      Returns number

    • Initialize slider

      Parameters

      • this: Swiper
      • Optionalel: string | HTMLElement

      Returns Swiper

    • !INTERNAL

      Parameters

      Returns boolean

    • Parameters

      Returns boolean

    • !INTERNAL

      Parameters

      • OptionalslideRealIndex: number
      • Optionalinitial: boolean

      Returns void

    • !INTERNAL

      Returns void

    • Parameters

      • Optionaloptions: {
            activeSlideIndex?: number;
            byController?: boolean;
            byMousewheel?: boolean;
            direction?: "next" | "prev";
            initial?: boolean;
            setTranslate?: boolean;
            slideRealIndex?: number;
            slideTo?: boolean;
        }

      Returns void

    • Get current maximal translate value

      Returns number

    • Get current minimal translate value

      Returns number

    • Parameters

      • this: Swiper
      • Optionalelement: string | HTMLElement

      Returns boolean

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

      Returns void

      prependSlide('<div class="swiper-slide">Slide 0"</div>')

      prependSlide([
       '<div class="swiper-slide">Slide 1"</div>',
       '<div class="swiper-slide">Slide 2"</div>'
      ]);

    • Parameters

      Returns void

    • Returns void

    • Remove selected slides. slideIndex could be a number with slide index to remove or array with indexes.

      Parameters

      • slideIndex: number | number[]

      Returns void

      removeSlide(0); // remove first slide
      removeSlide([0, 1]); // remove first and second slides
      removeAllSlides();    // Remove all slides

    • !INTERNAL

      Returns void

    • Set grab cursor

      Parameters

      • Optionalmoving: boolean

      Returns 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

      • this: Swiper
      • progress: number

        Swiper translate progress (from 0 to 1).

      • Optionalspeed: number

        Transition duration (in ms).

      Returns void

    • Parameters

      • duration: number
      • OptionalbyController: boolean | Swiper

      Returns void

    • Set custom css3 transform's translate value for swiper wrapper

      Parameters

      • translate: number
      • OptionalbyController: boolean | Swiper

      Returns void

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

      • Optionalinternal: boolean

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

      • Optionalinternal: boolean

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

      • Optionalinternal: boolean

      Returns boolean

    • Get dynamically calculated amount of slides per view, useful only when slidesPerView set to auto

      Parameters

      • this: Swiper
      • Optionalview: "previous" | "current"
      • Optionalexact: boolean

      Returns number

    • Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter.

      Parameters

      • Optionalindex: 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.

      • Optionalinternal: boolean
      • Optionalinitial: boolean

      Returns boolean

    • Returns void

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

      • Optionalinternal: boolean
      • Optionalthreshold: number

      Returns boolean

    • 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

      • Optionalindex: 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.

      • Optionalinternal: boolean

      Returns boolean | Swiper

    • Parameters

      • OptionalrunCallbacks: boolean
      • Optionaldirection: "reset" | "next" | "prev"

      Returns void

    • Parameters

      • OptionalrunCallbacks: boolean
      • Optionaldirection: "reset" | "next" | "prev"

      Returns void

    • Animate custom css3 transform's translate value for swiper wrapper

      Parameters

      • Optionaltranslate: number

        Translate value (in px)

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

      • Optionalinternal: boolean

      Returns boolean

    • Unset grab cursor

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

      Parameters

      Returns void

    • Parameters

      • OptionalnewActiveIndex: number

      Returns 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

    • Parameters

      • el: HTMLElement
      • Optionalpath: EventTarget[]

      Returns void

    • recalculate swiper progress

      Parameters

      • Optionaltranslate: number

      Returns void

    • recalculate size of swiper container

      Returns void

    • recalculate number of slides and their offsets. Useful after you add/remove slides with JavaScript

      Returns void

    • update active/prev/next classes on slides and bullets

      Returns void

    • Returns void

    • Parameters

      • Optionaltranslate: number

      Returns void

    • Parameters

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    __modules____preventObserver____swiper___clientLeft_cssModeVirtualInitialSet_immediateVirtuala11yactiveIndexallowClickallowSlideNextallowSlidePrevallowTouchMoveanimatingautoplaybrowsercardsEffectclassNamesclickedIndexclickedSlidecontrollercoverflowEffectcreativeEffectcubeEffectcurrentBreakpointdestroyeddevicedocumentTouchHandlerProceededelenabledeventsAnyListenerseventsListenersfadeEffectflipEffectfreeModegridhashNavigationheighthistoryhostElimagesLoadedimagesToLoadinitializedisBeginningisElementisEndisLockedkeyboardloopedSlidesmodulesmountedmousewheelnavigationonClickonDocumentTouchStartonLoadonScrollonSlideToWrapperTransitionEndonTouchEndonTouchMoveonTouchStartonTranslateToWrapperTransitionEndoriginalParamspaginationparallaxparamspassedParamspreviousIndexpreviousRealIndexpreviousSnapIndexpreviousTranslateprogressprogressLooprealIndexrtlrtlTranslatescrollbarsizeslidesslidesElslidesGridslidesSizesGridsnapGridsnapIndexsupportswipeDirectionthumbstouchestouchesDirectiontouchEventsDatatranslatevelocityvirtualvirtualSizevisibleSlidesvisibleSlidesIndexeswidthwrapperElwrongRTLzoomdefaultsextendedDefaults
    Methods
    addClassesaddSlideappendSlideattachEventschangeDirectionchangeLanguageDirectioncheckOverflowcssOverflowAdjustmentdestroydetachEventsdisableemitemitContainerClassesemitSlidesClassesenablegetBreakpointgetDirectionLabelgetSlideClassesgetSlideIndexgetSlideIndexByDatagetSlideIndexWhenGridgetTranslateinitisHorizontalisVerticalloopCreateloopDestroyloopFixmaxTranslateminTranslatemountoffoffAnyononAnyonceprependSliderecalcSlidesremoveAllSlidesremoveClassesremoveSlidesetBreakpointsetGrabCursorsetProgresssetTransitionsetTranslateslideNextslidePrevslideResetslidesPerViewDynamicslideToslideToClickedSlideslideToClosestslideToLooptransitionEndtransitionStarttranslateTounsetGrabCursorupdateupdateActiveIndexupdateAutoHeightupdateClickedSlideupdateProgressupdateSizeupdateSlidesupdateSlidesClassesupdateSlidesOffsetupdateSlidesProgressextendDefaultsinstallModuleuse