Swiper - v12.0.3
    Preparing search index...

    Interface SwiperEvents

    interface SwiperEvents {
        _beforeBreakpoint?: (
            swiper: SwiperClass,
            breakpointParams: SwiperOptions,
        ) => void;
        _containerClasses?: (swiper: SwiperClass, classNames: string) => void;
        _freeModeNoMomentumRelease?: (swiper: SwiperClass) => void;
        _slideClass?: (
            swiper: SwiperClass,
            slideEl: HTMLElement,
            classNames: string,
        ) => void;
        _slideClasses?: (
            swiper: SwiperClass,
            slides: { classNames: string; index: number; slideEl: HTMLElement }[],
        ) => void;
        _swiper?: (swiper: SwiperClass) => void;
        activeIndexChange: (swiper: SwiperClass) => void;
        afterInit: (swiper: SwiperClass) => void;
        autoplay: (swiper: SwiperClass) => void;
        autoplayPause: (swiper: SwiperClass) => void;
        autoplayResume: (swiper: SwiperClass) => void;
        autoplayStart: (swiper: SwiperClass) => void;
        autoplayStop: (swiper: SwiperClass) => void;
        autoplayTimeLeft: (
            swiper: SwiperClass,
            timeLeft: number,
            percentage: number,
        ) => void;
        beforeDestroy: (swiper: SwiperClass) => void;
        beforeInit: (swiper: SwiperClass) => void;
        beforeLoopFix: (swiper: SwiperClass) => void;
        beforeResize: (swiper: SwiperClass) => void;
        beforeSlideChangeStart: (swiper: SwiperClass) => void;
        beforeTransitionStart: (
            swiper: SwiperClass,
            speed: number,
            internal: any,
        ) => void;
        breakpoint: (swiper: SwiperClass, breakpointParams: SwiperOptions) => void;
        changeDirection: (swiper: SwiperClass) => void;
        click: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        destroy: (swiper: SwiperClass) => void;
        doubleClick: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        doubleTap: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        fromEdge: (swiper: SwiperClass) => void;
        hashChange: (swiper: SwiperClass) => void;
        hashSet: (swiper: SwiperClass) => void;
        init: (swiper: SwiperClass) => any;
        keyPress: (swiper: SwiperClass, keyCode: string) => void;
        lock: (swiper: SwiperClass) => void;
        loopFix: (swiper: SwiperClass) => void;
        momentumBounce: (swiper: SwiperClass) => void;
        navigationHide: (swiper: SwiperClass) => void;
        navigationNext: (swiper: SwiperClass) => void;
        navigationPrev: (swiper: SwiperClass) => void;
        navigationShow: (swiper: SwiperClass) => void;
        observerUpdate: (swiper: SwiperClass) => void;
        orientationchange: (swiper: SwiperClass) => void;
        paginationHide: (swiper: SwiperClass) => void;
        paginationRender: (swiper: SwiperClass, paginationEl: HTMLElement) => void;
        paginationShow: (swiper: SwiperClass) => void;
        paginationUpdate: (swiper: SwiperClass, paginationEl: HTMLElement) => void;
        progress: (swiper: SwiperClass, progress: number) => void;
        reachBeginning: (swiper: SwiperClass) => void;
        reachEnd: (swiper: SwiperClass) => void;
        realIndexChange: (swiper: SwiperClass) => void;
        resize: (swiper: SwiperClass) => void;
        scroll: (swiper: SwiperClass, event: WheelEvent) => void;
        scrollbarDragEnd: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        scrollbarDragMove: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        scrollbarDragStart: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        setTransition: (swiper: SwiperClass, transition: number) => void;
        setTranslate: (swiper: SwiperClass, translate: number) => void;
        slideChange: (swiper: SwiperClass) => void;
        slideChangeTransitionEnd: (swiper: SwiperClass) => void;
        slideChangeTransitionStart: (swiper: SwiperClass) => void;
        slideNextTransitionEnd: (swiper: SwiperClass) => void;
        slideNextTransitionStart: (swiper: SwiperClass) => void;
        slidePrevTransitionEnd: (swiper: SwiperClass) => void;
        slidePrevTransitionStart: (swiper: SwiperClass) => void;
        slideResetTransitionEnd: (swiper: SwiperClass) => void;
        slideResetTransitionStart: (swiper: SwiperClass) => void;
        sliderFirstMove: (swiper: SwiperClass, event: TouchEvent) => void;
        sliderMove: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        slidesGridLengthChange: (swiper: SwiperClass) => void;
        slidesLengthChange: (swiper: SwiperClass) => void;
        slidesUpdated: (swiper: SwiperClass) => void;
        snapGridLengthChange: (swiper: SwiperClass) => void;
        snapIndexChange: (swiper: SwiperClass) => void;
        tap: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        toEdge: (swiper: SwiperClass) => void;
        touchEnd: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        touchMove: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        touchMoveOpposite: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        touchStart: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        transitionEnd: (swiper: SwiperClass) => void;
        transitionStart: (swiper: SwiperClass) => void;
        unlock: (swiper: SwiperClass) => void;
        update: (swiper: SwiperClass) => void;
        zoomChange: (
            swiper: SwiperClass,
            scale: number,
            imageEl: HTMLElement,
            slideEl: HTMLElement,
        ) => void;
    }

    Hierarchy (View Summary)

    Index

    Properties

    _beforeBreakpoint? _containerClasses? _freeModeNoMomentumRelease? _slideClass? _slideClasses? _swiper? activeIndexChange afterInit autoplay autoplayPause autoplayResume autoplayStart autoplayStop autoplayTimeLeft beforeDestroy beforeInit beforeLoopFix beforeResize beforeSlideChangeStart beforeTransitionStart breakpoint changeDirection click destroy doubleClick doubleTap fromEdge hashChange hashSet init keyPress lock loopFix momentumBounce navigationHide navigationNext navigationPrev navigationShow observerUpdate orientationchange paginationHide paginationRender paginationShow paginationUpdate progress reachBeginning reachEnd realIndexChange resize scroll scrollbarDragEnd scrollbarDragMove scrollbarDragStart setTransition setTranslate slideChange slideChangeTransitionEnd slideChangeTransitionStart slideNextTransitionEnd slideNextTransitionStart slidePrevTransitionEnd slidePrevTransitionStart slideResetTransitionEnd slideResetTransitionStart sliderFirstMove sliderMove slidesGridLengthChange slidesLengthChange slidesUpdated snapGridLengthChange snapIndexChange tap toEdge touchEnd touchMove touchMoveOpposite touchStart transitionEnd transitionStart unlock update zoomChange

    Properties

    Optional_beforeBreakpoint

    _beforeBreakpoint?: (
        swiper: SwiperClass,
        breakpointParams: SwiperOptions,
    ) => void

    !INTERNAL: Event will fired right before breakpoint change

    Optional_containerClasses

    _containerClasses?: (swiper: SwiperClass, classNames: string) => void

    !INTERNAL: Event will fired after setting CSS classes on swiper container element

    Optional_freeModeNoMomentumRelease

    _freeModeNoMomentumRelease?: (swiper: SwiperClass) => void

    !INTERNAL: Event will be fired on free mode touch end (release) and there will no be momentum

    Optional_slideClass

    _slideClass?: (
        swiper: SwiperClass,
        slideEl: HTMLElement,
        classNames: string,
    ) => void

    !INTERNAL: Event will fired after setting CSS classes on swiper slide element

    Optional_slideClasses

    _slideClasses?: (
        swiper: SwiperClass,
        slides: { classNames: string; index: number; slideEl: HTMLElement }[],
    ) => void

    !INTERNAL: Event will fired after setting CSS classes on all swiper slides

    Optional_swiper

    _swiper?: (swiper: SwiperClass) => void

    !INTERNAL: Event will fired as soon as swiper instance available (before init)

    activeIndexChange: (swiper: SwiperClass) => void

    Event will fired on active index change

    afterInit: (swiper: SwiperClass) => void

    Event will fired right after initialization

    autoplay: (swiper: SwiperClass) => void

    Event will be fired when slide changed with autoplay

    autoplayPause: (swiper: SwiperClass) => void

    Event will be fired on autoplay pause

    autoplayResume: (swiper: SwiperClass) => void

    Event will be fired on autoplay resume

    autoplayStart: (swiper: SwiperClass) => void

    Event will be fired in when autoplay started

    autoplayStop: (swiper: SwiperClass) => void

    Event will be fired when autoplay stopped

    autoplayTimeLeft: (
        swiper: SwiperClass,
        timeLeft: number,
        percentage: number,
    ) => void

    Event triggers continuously while autoplay is enabled. It contains time left (in ms) before transition to next slide and percentage of that time related to autoplay delay

    beforeDestroy: (swiper: SwiperClass) => void

    Event will be fired right before Swiper destroyed

    beforeInit: (swiper: SwiperClass) => void

    Event will fired right before initialization

    beforeLoopFix: (swiper: SwiperClass) => void

    Event will be fired right before "loop fix"

    beforeResize: (swiper: SwiperClass) => void

    Event will fired before resize handler

    beforeSlideChangeStart: (swiper: SwiperClass) => void

    Event will fired before slide change transition start

    beforeTransitionStart: (
        swiper: SwiperClass,
        speed: number,
        internal: any,
    ) => void

    Event will fired before transition start

    breakpoint: (swiper: SwiperClass, breakpointParams: SwiperOptions) => void

    Event will be fired on breakpoint change

    changeDirection: (swiper: SwiperClass) => void

    Event will fired on direction change

    click: (
        swiper: SwiperClass,
        event: MouseEvent | TouchEvent | PointerEvent,
    ) => void

    Event will be fired when user click/tap on Swiper. Receives pointerup event as an arguments.

    destroy: (swiper: SwiperClass) => void

    Event will be fired on swiper destroy

    doubleClick: (
        swiper: SwiperClass,
        event: MouseEvent | TouchEvent | PointerEvent,
    ) => void

    Event will be fired when user double click/tap on Swiper

    doubleTap: (
        swiper: SwiperClass,
        event: MouseEvent | TouchEvent | PointerEvent,
    ) => void

    Event will be fired when user double tap on Swiper's container. Receives pointerup event as an arguments

    fromEdge: (swiper: SwiperClass) => void

    Event will be fired when Swiper goes from beginning or end position

    hashChange: (swiper: SwiperClass) => void

    Event will be fired on window hash change

    hashSet: (swiper: SwiperClass) => void

    Event will be fired when swiper updates the hash

    init: (swiper: SwiperClass) => any

    Fired right after Swiper initialization.

    Note that with swiper.on('init') syntax it will work only in case you set init: false parameter.

    const swiper = new Swiper('.swiper', {
      init: false,
      // other parameters
    });
    swiper.on('init', function() {
     // do something
    });
    // init Swiper
    swiper.init();

    // Otherwise use it as the parameter:
    const swiper = new Swiper('.swiper', {
      // other parameters
      on: {
        init: function () {
          // do something
        },
      }
    });
    keyPress: (swiper: SwiperClass, keyCode: string) => void

    Event will be fired on key press

    lock: (swiper: SwiperClass) => void

    Event will be fired when swiper is locked (when watchOverflow enabled)

    loopFix: (swiper: SwiperClass) => void

    Event will be fired after "loop fix"

    momentumBounce: (swiper: SwiperClass) => void

    Event will be fired on momentum bounce

    navigationHide: (swiper: SwiperClass) => void

    Event will be fired on navigation hide

    navigationNext: (swiper: SwiperClass) => void

    Event will be fired on navigation next button click

    navigationPrev: (swiper: SwiperClass) => void

    Event will be fired on navigation prev button click

    navigationShow: (swiper: SwiperClass) => void

    Event will be fired on navigation show

    observerUpdate: (swiper: SwiperClass) => void

    Event will be fired if observer is enabled and it detects DOM mutations

    orientationchange: (swiper: SwiperClass) => void

    Event will be fired on orientation change (e.g. landscape -> portrait)

    paginationHide: (swiper: SwiperClass) => void

    Event will be fired on pagination hide

    paginationRender: (swiper: SwiperClass, paginationEl: HTMLElement) => void

    Event will be fired after pagination rendered

    paginationShow: (swiper: SwiperClass) => void

    Event will be fired on pagination show

    paginationUpdate: (swiper: SwiperClass, paginationEl: HTMLElement) => void

    Event will be fired when pagination updated

    progress: (swiper: SwiperClass, progress: number) => void

    Event will be fired when Swiper progress is changed, as an arguments it receives progress that is always from 0 to 1

    reachBeginning: (swiper: SwiperClass) => void

    Event will be fired when Swiper reach its beginning (initial position)

    reachEnd: (swiper: SwiperClass) => void

    Event will be fired when Swiper reach last slide

    realIndexChange: (swiper: SwiperClass) => void

    Event will fired on real index change

    resize: (swiper: SwiperClass) => void

    Event will be fired on window resize right before swiper's onresize manipulation

    scroll: (swiper: SwiperClass, event: WheelEvent) => void

    Event will be fired on mousewheel scroll

    scrollbarDragEnd: (
        swiper: SwiperClass,
        event: MouseEvent | TouchEvent | PointerEvent,
    ) => void

    Event will be fired on draggable scrollbar drag end

    scrollbarDragMove: (
        swiper: SwiperClass,
        event: MouseEvent | TouchEvent | PointerEvent,
    ) => void

    Event will be fired on draggable scrollbar drag move

    scrollbarDragStart: (
        swiper: SwiperClass,
        event: MouseEvent | TouchEvent | PointerEvent,
    ) => void

    Event will be fired on draggable scrollbar drag start

    setTransition: (swiper: SwiperClass, transition: number) => void

    Event will be fired everytime when swiper starts animation. Receives current transition duration (in ms) as an arguments

    setTranslate: (swiper: SwiperClass, translate: number) => void

    Event will be fired when swiper's wrapper change its position. Receives current translate value as an arguments

    slideChange: (swiper: SwiperClass) => void

    Event will be fired when currently active slide is changed

    slideChangeTransitionEnd: (swiper: SwiperClass) => void

    Event will be fired after animation to other slide (next or previous).

    slideChangeTransitionStart: (swiper: SwiperClass) => void

    Event will be fired in the beginning of animation to other slide (next or previous).

    slideNextTransitionEnd: (swiper: SwiperClass) => void

    Same as "slideChangeTransitionEnd" but for "forward" direction only

    slideNextTransitionStart: (swiper: SwiperClass) => void

    Same as "slideChangeTransitionStart" but for "forward" direction only

    slidePrevTransitionEnd: (swiper: SwiperClass) => void

    Same as "slideChangeTransitionEnd" but for "backward" direction only

    slidePrevTransitionStart: (swiper: SwiperClass) => void

    Same as "slideChangeTransitionStart" but for "backward" direction only

    slideResetTransitionEnd: (swiper: SwiperClass) => void

    Event will be fired in the end of animation of resetting slide to current one

    slideResetTransitionStart: (swiper: SwiperClass) => void

    Event will be fired in the beginning of animation of resetting slide to current one

    sliderFirstMove: (swiper: SwiperClass, event: TouchEvent) => void

    Event will be fired with first touch/drag move

    sliderMove: (
        swiper: SwiperClass,
        event: MouseEvent | TouchEvent | PointerEvent,
    ) => void

    Event will be fired when user touch and move finger over Swiper and move it. Receives pointermove event as an arguments.

    slidesGridLengthChange: (swiper: SwiperClass) => void

    Event will be fired when slides grid has changed

    slidesLengthChange: (swiper: SwiperClass) => void

    Event will be fired when number of slides has changed

    slidesUpdated: (swiper: SwiperClass) => void

    Event will be fired after slides and their sizes are calculated and updated

    snapGridLengthChange: (swiper: SwiperClass) => void

    Event will be fired when snap grid has changed

    snapIndexChange: (swiper: SwiperClass) => void

    Event will fired on snap index change

    tap: (
        swiper: SwiperClass,
        event: MouseEvent | TouchEvent | PointerEvent,
    ) => void

    Event will be fired when user click/tap on Swiper. Receives pointerup event as an arguments.

    toEdge: (swiper: SwiperClass) => void

    Event will be fired when Swiper goes to beginning or end position

    touchEnd: (
        swiper: SwiperClass,
        event: MouseEvent | TouchEvent | PointerEvent,
    ) => void

    Event will be fired when user release Swiper. Receives pointerup event as an arguments.

    touchMove: (
        swiper: SwiperClass,
        event: MouseEvent | TouchEvent | PointerEvent,
    ) => void

    Event will be fired when user touch and move finger over Swiper. Receives pointermove event as an arguments.

    touchMoveOpposite: (
        swiper: SwiperClass,
        event: MouseEvent | TouchEvent | PointerEvent,
    ) => void

    Event will be fired when user touch and move finger over Swiper in direction opposite to direction parameter. Receives pointermove event as an arguments.

    touchStart: (
        swiper: SwiperClass,
        event: MouseEvent | TouchEvent | PointerEvent,
    ) => void

    Event will be fired when user touch Swiper. Receives pointerdown event as an arguments.

    transitionEnd: (swiper: SwiperClass) => void

    Event will be fired after transition.

    transitionStart: (swiper: SwiperClass) => void

    Event will be fired in the beginning of transition.

    unlock: (swiper: SwiperClass) => void

    Event will be fired when swiper is unlocked (when watchOverflow enabled)

    update: (swiper: SwiperClass) => void

    Event will be fired after swiper.update() call

    zoomChange: (
        swiper: SwiperClass,
        scale: number,
        imageEl: HTMLElement,
        slideEl: HTMLElement,
    ) => void

    Event will be fired on zoom change

    Settings

    Member Visibility

    On This Page

    Properties
    _beforeBreakpoint_containerClasses_freeModeNoMomentumRelease_slideClass_slideClasses_swiperactiveIndexChangeafterInitautoplayautoplayPauseautoplayResumeautoplayStartautoplayStopautoplayTimeLeftbeforeDestroybeforeInitbeforeLoopFixbeforeResizebeforeSlideChangeStartbeforeTransitionStartbreakpointchangeDirectionclickdestroydoubleClickdoubleTapfromEdgehashChangehashSetinitkeyPresslockloopFixmomentumBouncenavigationHidenavigationNextnavigationPrevnavigationShowobserverUpdateorientationchangepaginationHidepaginationRenderpaginationShowpaginationUpdateprogressreachBeginningreachEndrealIndexChangeresizescrollscrollbarDragEndscrollbarDragMovescrollbarDragStartsetTransitionsetTranslateslideChangeslideChangeTransitionEndslideChangeTransitionStartslideNextTransitionEndslideNextTransitionStartslidePrevTransitionEndslidePrevTransitionStartslideResetTransitionEndslideResetTransitionStartsliderFirstMovesliderMoveslidesGridLengthChangeslidesLengthChangeslidesUpdatedsnapGridLengthChangesnapIndexChangetaptoEdgetouchEndtouchMovetouchMoveOppositetouchStarttransitionEndtransitionStartunlockupdatezoomChange