Swiper - v12.0.3
    Preparing search index...

    Type Alias SwiperProps

    SwiperProps: Omit<
        React.HTMLAttributes<HTMLElement>,

            | "onProgress"
            | "onClick"
            | "onTouchEnd"
            | "onTouchMove"
            | "onTouchStart"
            | "onTransitionEnd"
            | "onKeyPress"
            | "onDoubleClick"
            | "onScroll"
            | "onResize",
    > & SwiperOptions & {
        _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;
        onActiveIndexChange?: (swiper: SwiperClass) => void;
        onAfterInit?: (swiper: SwiperClass) => void;
        onAutoplay?: (swiper: SwiperClass) => void;
        onAutoplayPause?: (swiper: SwiperClass) => void;
        onAutoplayResume?: (swiper: SwiperClass) => void;
        onAutoplayStart?: (swiper: SwiperClass) => void;
        onAutoplayStop?: (swiper: SwiperClass) => void;
        onAutoplayTimeLeft?: (
            swiper: SwiperClass,
            timeLeft: number,
            percentage: number,
        ) => void;
        onBeforeDestroy?: (swiper: SwiperClass) => void;
        onBeforeInit?: (swiper: SwiperClass) => void;
        onBeforeLoopFix?: (swiper: SwiperClass) => void;
        onBeforeResize?: (swiper: SwiperClass) => void;
        onBeforeSlideChangeStart?: (swiper: SwiperClass) => void;
        onBeforeTransitionStart?: (
            swiper: SwiperClass,
            speed: number,
            internal: any,
        ) => void;
        onBreakpoint?: (
            swiper: SwiperClass,
            breakpointParams: SwiperOptions,
        ) => void;
        onChangeDirection?: (swiper: SwiperClass) => void;
        onClick?: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        onDestroy?: (swiper: SwiperClass) => void;
        onDoubleClick?: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        onDoubleTap?: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        onFromEdge?: (swiper: SwiperClass) => void;
        onHashChange?: (swiper: SwiperClass) => void;
        onHashSet?: (swiper: SwiperClass) => void;
        onInit?: (swiper: SwiperClass) => any;
        onKeyPress?: (swiper: SwiperClass, keyCode: string) => void;
        onLock?: (swiper: SwiperClass) => void;
        onLoopFix?: (swiper: SwiperClass) => void;
        onMomentumBounce?: (swiper: SwiperClass) => void;
        onNavigationHide?: (swiper: SwiperClass) => void;
        onNavigationNext?: (swiper: SwiperClass) => void;
        onNavigationPrev?: (swiper: SwiperClass) => void;
        onNavigationShow?: (swiper: SwiperClass) => void;
        onObserverUpdate?: (swiper: SwiperClass) => void;
        onOrientationchange?: (swiper: SwiperClass) => void;
        onPaginationHide?: (swiper: SwiperClass) => void;
        onPaginationRender?: (
            swiper: SwiperClass,
            paginationEl: HTMLElement,
        ) => void;
        onPaginationShow?: (swiper: SwiperClass) => void;
        onPaginationUpdate?: (
            swiper: SwiperClass,
            paginationEl: HTMLElement,
        ) => void;
        onProgress?: (swiper: SwiperClass, progress: number) => void;
        onReachBeginning?: (swiper: SwiperClass) => void;
        onReachEnd?: (swiper: SwiperClass) => void;
        onRealIndexChange?: (swiper: SwiperClass) => void;
        onResize?: (swiper: SwiperClass) => void;
        onScroll?: (swiper: SwiperClass, event: WheelEvent) => void;
        onScrollbarDragEnd?: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        onScrollbarDragMove?: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        onScrollbarDragStart?: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        onSetTransition?: (swiper: SwiperClass, transition: number) => void;
        onSetTranslate?: (swiper: SwiperClass, translate: number) => void;
        onSlideChange?: (swiper: SwiperClass) => void;
        onSlideChangeTransitionEnd?: (swiper: SwiperClass) => void;
        onSlideChangeTransitionStart?: (swiper: SwiperClass) => void;
        onSlideNextTransitionEnd?: (swiper: SwiperClass) => void;
        onSlideNextTransitionStart?: (swiper: SwiperClass) => void;
        onSlidePrevTransitionEnd?: (swiper: SwiperClass) => void;
        onSlidePrevTransitionStart?: (swiper: SwiperClass) => void;
        onSlideResetTransitionEnd?: (swiper: SwiperClass) => void;
        onSlideResetTransitionStart?: (swiper: SwiperClass) => void;
        onSliderFirstMove?: (swiper: SwiperClass, event: TouchEvent) => void;
        onSliderMove?: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        onSlidesGridLengthChange?: (swiper: SwiperClass) => void;
        onSlidesLengthChange?: (swiper: SwiperClass) => void;
        onSlidesUpdated?: (swiper: SwiperClass) => void;
        onSnapGridLengthChange?: (swiper: SwiperClass) => void;
        onSnapIndexChange?: (swiper: SwiperClass) => void;
        onSwiper?: (swiper: SwiperClass) => void;
        onTap?: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        onToEdge?: (swiper: SwiperClass) => void;
        onTouchEnd?: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        onTouchMove?: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        onTouchMoveOpposite?: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        onTouchStart?: (
            swiper: SwiperClass,
            event: MouseEvent | TouchEvent | PointerEvent,
        ) => void;
        onTransitionEnd?: (swiper: SwiperClass) => void;
        onTransitionStart?: (swiper: SwiperClass) => void;
        onUnlock?: (swiper: SwiperClass) => void;
        onUpdate?: (swiper: SwiperClass) => void;
        onZoomChange?: (
            swiper: SwiperClass,
            scale: number,
            imageEl: HTMLElement,
            slideEl: HTMLElement,
        ) => void;
        tag?: string;
        wrapperTag?: string;
    }

    Type Declaration

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

      !INTERNAL: Event will fired right before breakpoint change

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

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

    • Optional_freeModeNoMomentumRelease?: (swiper: SwiperClass) => void

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

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

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

    • Optional_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: SwiperClass) => void

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

    • OptionalonActiveIndexChange?: (swiper: SwiperClass) => void

      Event will fired on active index change

    • OptionalonAfterInit?: (swiper: SwiperClass) => void

      Event will fired right after initialization

    • OptionalonAutoplay?: (swiper: SwiperClass) => void

      Event will be fired when slide changed with autoplay

    • OptionalonAutoplayPause?: (swiper: SwiperClass) => void

      Event will be fired on autoplay pause

    • OptionalonAutoplayResume?: (swiper: SwiperClass) => void

      Event will be fired on autoplay resume

    • OptionalonAutoplayStart?: (swiper: SwiperClass) => void

      Event will be fired in when autoplay started

    • OptionalonAutoplayStop?: (swiper: SwiperClass) => void

      Event will be fired when autoplay stopped

    • OptionalonAutoplayTimeLeft?: (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

    • OptionalonBeforeDestroy?: (swiper: SwiperClass) => void

      Event will be fired right before Swiper destroyed

    • OptionalonBeforeInit?: (swiper: SwiperClass) => void

      Event will fired right before initialization

    • OptionalonBeforeLoopFix?: (swiper: SwiperClass) => void

      Event will be fired right before "loop fix"

    • OptionalonBeforeResize?: (swiper: SwiperClass) => void

      Event will fired before resize handler

    • OptionalonBeforeSlideChangeStart?: (swiper: SwiperClass) => void

      Event will fired before slide change transition start

    • OptionalonBeforeTransitionStart?: (swiper: SwiperClass, speed: number, internal: any) => void

      Event will fired before transition start

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

      Event will be fired on breakpoint change

    • OptionalonChangeDirection?: (swiper: SwiperClass) => void

      Event will fired on direction change

    • OptionalonClick?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void

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

    • OptionalonDestroy?: (swiper: SwiperClass) => void

      Event will be fired on swiper destroy

    • OptionalonDoubleClick?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void

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

    • OptionalonDoubleTap?: (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

    • OptionalonFromEdge?: (swiper: SwiperClass) => void

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

    • OptionalonHashChange?: (swiper: SwiperClass) => void
    • OptionalonHashSet?: (swiper: SwiperClass) => void

      Event will be fired when swiper updates the hash

    • OptionalonInit?: (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
          },
        }
      });
    • OptionalonKeyPress?: (swiper: SwiperClass, keyCode: string) => void
    • OptionalonLock?: (swiper: SwiperClass) => void

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

    • OptionalonLoopFix?: (swiper: SwiperClass) => void

      Event will be fired after "loop fix"

    • OptionalonMomentumBounce?: (swiper: SwiperClass) => void

      Event will be fired on momentum bounce

    • OptionalonNavigationHide?: (swiper: SwiperClass) => void
    • OptionalonNavigationNext?: (swiper: SwiperClass) => void

      Event will be fired on navigation next button click

    • OptionalonNavigationPrev?: (swiper: SwiperClass) => void

      Event will be fired on navigation prev button click

    • OptionalonNavigationShow?: (swiper: SwiperClass) => void

      Event will be fired on navigation show

    • OptionalonObserverUpdate?: (swiper: SwiperClass) => void

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

    • OptionalonOrientationchange?: (swiper: SwiperClass) => void

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

    • OptionalonPaginationHide?: (swiper: SwiperClass) => void

      Event will be fired on pagination hide

    • OptionalonPaginationRender?: (swiper: SwiperClass, paginationEl: HTMLElement) => void
    • OptionalonPaginationShow?: (swiper: SwiperClass) => void

      Event will be fired on pagination show

    • OptionalonPaginationUpdate?: (swiper: SwiperClass, paginationEl: HTMLElement) => void

      Event will be fired when pagination updated

    • OptionalonProgress?: (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

    • OptionalonReachBeginning?: (swiper: SwiperClass) => void

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

    • OptionalonReachEnd?: (swiper: SwiperClass) => void

      Event will be fired when Swiper reach last slide

    • OptionalonRealIndexChange?: (swiper: SwiperClass) => void

      Event will fired on real index change

    • OptionalonResize?: (swiper: SwiperClass) => void

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

    • OptionalonScroll?: (swiper: SwiperClass, event: WheelEvent) => void
    • OptionalonScrollbarDragEnd?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void

      Event will be fired on draggable scrollbar drag end

    • OptionalonScrollbarDragMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void

      Event will be fired on draggable scrollbar drag move

    • OptionalonScrollbarDragStart?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void
    • OptionalonSetTransition?: (swiper: SwiperClass, transition: number) => void

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

    • OptionalonSetTranslate?: (swiper: SwiperClass, translate: number) => void

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

    • OptionalonSlideChange?: (swiper: SwiperClass) => void

      Event will be fired when currently active slide is changed

    • OptionalonSlideChangeTransitionEnd?: (swiper: SwiperClass) => void

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

    • OptionalonSlideChangeTransitionStart?: (swiper: SwiperClass) => void

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

    • OptionalonSlideNextTransitionEnd?: (swiper: SwiperClass) => void

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

    • OptionalonSlideNextTransitionStart?: (swiper: SwiperClass) => void

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

    • OptionalonSlidePrevTransitionEnd?: (swiper: SwiperClass) => void

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

    • OptionalonSlidePrevTransitionStart?: (swiper: SwiperClass) => void

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

    • OptionalonSlideResetTransitionEnd?: (swiper: SwiperClass) => void

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

    • OptionalonSlideResetTransitionStart?: (swiper: SwiperClass) => void

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

    • OptionalonSliderFirstMove?: (swiper: SwiperClass, event: TouchEvent) => void

      Event will be fired with first touch/drag move

    • OptionalonSliderMove?: (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.

    • OptionalonSlidesGridLengthChange?: (swiper: SwiperClass) => void

      Event will be fired when slides grid has changed

    • OptionalonSlidesLengthChange?: (swiper: SwiperClass) => void

      Event will be fired when number of slides has changed

    • OptionalonSlidesUpdated?: (swiper: SwiperClass) => void

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

    • OptionalonSnapGridLengthChange?: (swiper: SwiperClass) => void

      Event will be fired when snap grid has changed

    • OptionalonSnapIndexChange?: (swiper: SwiperClass) => void

      Event will fired on snap index change

    • OptionalonSwiper?: (swiper: SwiperClass) => void

      Get Swiper instance

    • OptionalonTap?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void

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

    • OptionalonToEdge?: (swiper: SwiperClass) => void

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

    • OptionalonTouchEnd?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void

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

    • OptionalonTouchMove?: (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.

    • OptionalonTouchMoveOpposite?: (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.

    • OptionalonTouchStart?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void

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

    • OptionalonTransitionEnd?: (swiper: SwiperClass) => void

      Event will be fired after transition.

    • OptionalonTransitionStart?: (swiper: SwiperClass) => void

      Event will be fired in the beginning of transition.

    • OptionalonUnlock?: (swiper: SwiperClass) => void

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

    • OptionalonUpdate?: (swiper: SwiperClass) => void

      Event will be fired after swiper.update() call

    • OptionalonZoomChange?: (
          swiper: SwiperClass,
          scale: number,
          imageEl: HTMLElement,
          slideEl: HTMLElement,
      ) => void
    • Optionaltag?: string

      Swiper container tag

      'div'
    • OptionalwrapperTag?: string

      Swiper wrapper tag

      'div'

    Settings

    Member Visibility