123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501 |
- import * as React from 'react';
- import type { SwiperOptions, Swiper as SwiperClass } from './types/index.d.ts';
- type SwiperProps = Omit<
- React.HTMLAttributes<HTMLElement>,
- | 'onProgress'
- | 'onClick'
- | 'onTouchEnd'
- | 'onTouchMove'
- | 'onTouchStart'
- | 'onTransitionEnd'
- | 'onKeyPress'
- | 'onDoubleClick'
- | 'onScroll'
- | 'onResize'
- > &
- SwiperOptions & {
- /**
- * Swiper container tag
- *
- * @default 'div'
- */
- tag?: string;
- /**
- * Swiper wrapper tag
- *
- * @default 'div'
- */
- wrapperTag?: string;
- /**
- * Get Swiper instance
- */
- onSwiper?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired in when autoplay started
- */
- onAutoplayStart?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired when autoplay stopped
- */
- onAutoplayStop?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired on autoplay pause
- */
- onAutoplayPause?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired on autoplay resume
- */
- onAutoplayResume?: (swiper: SwiperClass) => 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
- */
- onAutoplayTimeLeft?: (swiper: SwiperClass, timeLeft: number, percentage: number) => void;
- /**
- * Event will be fired when slide changed with autoplay
- */
- onAutoplay?: (swiper: SwiperClass) => void;/**
- * Event will be fired on window hash change
- */
- onHashChange?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired when swiper updates the hash
- */
- onHashSet?: (swiper: SwiperClass) => void;/**
- * Event will be fired on key press
- */
- onKeyPress?: (swiper: SwiperClass, keyCode: string) => void;/**
- * Event will be fired on mousewheel scroll
- */
- onScroll?: (swiper: SwiperClass, event: WheelEvent) => void;/**
- * Event will be fired on navigation hide
- */
- onNavigationHide?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired on navigation show
- */
- onNavigationShow?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired on navigation prev button click
- */
- onNavigationPrev?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired on navigation next button click
- */
- onNavigationNext?: (swiper: SwiperClass) => void;/**
- * Event will be fired after pagination rendered
- */
- onPaginationRender?: (swiper: SwiperClass, paginationEl: HTMLElement) => void;
- /**
- * Event will be fired when pagination updated
- */
- onPaginationUpdate?: (swiper: SwiperClass, paginationEl: HTMLElement) => void;
- /**
- * Event will be fired on pagination hide
- */
- onPaginationHide?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired on pagination show
- */
- onPaginationShow?: (swiper: SwiperClass) => void;/**
- * Event will be fired on draggable scrollbar drag start
- */
- onScrollbarDragStart?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
- /**
- * Event will be fired on draggable scrollbar drag move
- */
- onScrollbarDragMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
- /**
- * Event will be fired on draggable scrollbar drag end
- */
- onScrollbarDragEnd?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;/**
- * Event will be fired on zoom change
- */
- onZoomChange?: (swiper: SwiperClass, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;
-
- /**
- * Fired right after Swiper initialization.
- * @note Note that with `swiper.on('init')` syntax it will
- * work only in case you set `init: false` parameter.
- *
- * @example
- * ```js
- * const swiper = new Swiper('.swiper', {
- * init: false,
- * // other parameters
- * });
- * swiper.on('init', function() {
- * // do something
- * });
- * // init Swiper
- * swiper.init();
- * ```
- *
- * @example
- * ```js
- * // Otherwise use it as the parameter:
- * const swiper = new Swiper('.swiper', {
- * // other parameters
- * on: {
- * init: function () {
- * // do something
- * },
- * }
- * });
- * ```
- */
- onInit?: (swiper: SwiperClass) => any;
- /**
- * Event will be fired right before Swiper destroyed
- */
- onBeforeDestroy?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired after slides and their sizes are calculated and updated
- */
- onSlidesUpdated?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired when currently active slide is changed
- */
- onSlideChange?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired in the beginning of animation to other slide (next or previous).
- */
- onSlideChangeTransitionStart?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired after animation to other slide (next or previous).
- */
- onSlideChangeTransitionEnd?: (swiper: SwiperClass) => void;
- /**
- * Same as "slideChangeTransitionStart" but for "forward" direction only
- */
- onSlideNextTransitionStart?: (swiper: SwiperClass) => void;
- /**
- * Same as "slideChangeTransitionEnd" but for "forward" direction only
- */
- onSlideNextTransitionEnd?: (swiper: SwiperClass) => void;
- /**
- * Same as "slideChangeTransitionStart" but for "backward" direction only
- */
- onSlidePrevTransitionStart?: (swiper: SwiperClass) => void;
- /**
- * Same as "slideChangeTransitionEnd" but for "backward" direction only
- */
- onSlidePrevTransitionEnd?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired in the beginning of transition.
- */
- onTransitionStart?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired after transition.
- */
- onTransitionEnd?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired when user touch Swiper. Receives `pointerdown` event as an arguments.
- */
- onTouchStart?: (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.
- */
- onTouchMove?: (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.
- */
- onTouchMoveOpposite?: (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.
- */
- onSliderMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
- /**
- * Event will be fired when user release Swiper. Receives `pointerup` event as an arguments.
- */
- onTouchEnd?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
- /**
- * Event will be fired when user click/tap on Swiper. Receives `pointerup` event as an arguments.
- */
- onClick?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
- /**
- * Event will be fired when user click/tap on Swiper. Receives `pointerup` event as an arguments.
- */
- onTap?: (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
- */
- onDoubleTap?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
- /**
- * Event will be fired when Swiper progress is changed, as an arguments it receives progress that is always from 0 to 1
- */
- onProgress?: (swiper: SwiperClass, progress: number) => void;
- /**
- * Event will be fired when Swiper reach its beginning (initial position)
- */
- onReachBeginning?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired when Swiper reach last slide
- */
- onReachEnd?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired when Swiper goes to beginning or end position
- */
- onToEdge?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired when Swiper goes from beginning or end position
- */
- onFromEdge?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired when swiper's wrapper change its position. Receives current translate value as an arguments
- */
- onSetTranslate?: (swiper: SwiperClass, translate: number) => void;
- /**
- * Event will be fired everytime when swiper starts animation. Receives current transition duration (in ms) as an arguments
- */
- onSetTransition?: (swiper: SwiperClass, transition: number) => void;
- /**
- * Event will be fired on window resize right before swiper's onresize manipulation
- */
- onResize?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired if observer is enabled and it detects DOM mutations
- */
- onObserverUpdate?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired right before "loop fix"
- */
- onBeforeLoopFix?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired after "loop fix"
- */
- onLoopFix?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired on breakpoint change
- */
- onBreakpoint?: (swiper: SwiperClass, breakpointParams: SwiperOptions) => void;
- /**
- * !INTERNAL: Event will fired right before breakpoint change
- */
- _beforeBreakpoint?: (swiper: SwiperClass, breakpointParams: SwiperOptions) => void;
- /**
- * !INTERNAL: Event will fired after setting CSS classes on swiper container element
- */
- _containerClasses?: (swiper: SwiperClass, classNames: string) => void;
- /**
- * !INTERNAL: Event will fired after setting CSS classes on swiper slide element
- */
- _slideClass?: (swiper: SwiperClass, slideEl: HTMLElement, classNames: string) => void;
- /**
- * !INTERNAL: Event will fired after setting CSS classes on all swiper slides
- */
- _slideClasses?: (
- swiper: SwiperClass,
- slides: { slideEl: HTMLElement; classNames: string; index: number }[],
- ) => void;
- /**
- * !INTERNAL: Event will fired as soon as swiper instance available (before init)
- */
- _swiper?: (swiper: SwiperClass) => void;
- /**
- * !INTERNAL: Event will be fired on free mode touch end (release) and there will no be momentum
- */
- _freeModeNoMomentumRelease?: (swiper: SwiperClass) => void;
- /**
- * Event will fired on active index change
- */
- onActiveIndexChange?: (swiper: SwiperClass) => void;
- /**
- * Event will fired on snap index change
- */
- onSnapIndexChange?: (swiper: SwiperClass) => void;
- /**
- * Event will fired on real index change
- */
- onRealIndexChange?: (swiper: SwiperClass) => void;
- /**
- * Event will fired right after initialization
- */
- onAfterInit?: (swiper: SwiperClass) => void;
- /**
- * Event will fired right before initialization
- */
- onBeforeInit?: (swiper: SwiperClass) => void;
- /**
- * Event will fired before resize handler
- */
- onBeforeResize?: (swiper: SwiperClass) => void;
- /**
- * Event will fired before slide change transition start
- */
- onBeforeSlideChangeStart?: (swiper: SwiperClass) => void;
- /**
- * Event will fired before transition start
- */
- onBeforeTransitionStart?: (swiper: SwiperClass, speed: number, internal: any) => void; // what is internal?
- /**
- * Event will fired on direction change
- */
- onChangeDirection?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired when user double click/tap on Swiper
- */
- onDoubleClick?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
- /**
- * Event will be fired on swiper destroy
- */
- onDestroy?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired on momentum bounce
- */
- onMomentumBounce?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired on orientation change (e.g. landscape -> portrait)
- */
- onOrientationchange?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired in the beginning of animation of resetting slide to current one
- */
- onSlideResetTransitionStart?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired in the end of animation of resetting slide to current one
- */
- onSlideResetTransitionEnd?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired with first touch/drag move
- */
- onSliderFirstMove?: (swiper: SwiperClass, event: TouchEvent) => void;
- /**
- * Event will be fired when number of slides has changed
- */
- onSlidesLengthChange?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired when slides grid has changed
- */
- onSlidesGridLengthChange?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired when snap grid has changed
- */
- onSnapGridLengthChange?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired after swiper.update() call
- */
- onUpdate?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired when swiper is locked (when `watchOverflow` enabled)
- */
- onLock?: (swiper: SwiperClass) => void;
- /**
- * Event will be fired when swiper is unlocked (when `watchOverflow` enabled)
- */
- onUnlock?: (swiper: SwiperClass) => void;
-
- };
- interface SlideData {
- isActive: boolean;
- isVisible: boolean;
- isPrev: boolean;
- isNext: boolean;
- }
- type SwiperSlideProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {
- /**
- * Slide tag
- *
- * @default 'div'
- */
- tag?: string;
- /**
- * Enables additional wrapper required for zoom mode
- *
- * @default false
- */
- zoom?: boolean;
- /**
- * Adds lazy preloader to the slide
- *
- * @default false
- */
- lazy?: boolean;
- /**
- * Slide's index in slides array/collection
- *
- * @default false
- */
- virtualIndex?: number;
- /**
- * Slide's child element or render function
- *
- * @default undefined
- */
- children?: React.ReactNode | ((slideData: SlideData) => React.ReactNode);
- };
- interface SwiperRef extends React.HTMLAttributes<HTMLElement> {
- swiper: SwiperClass;
- }
- declare const Swiper: React.FunctionComponent<
- React.RefAttributes<SwiperRef> & React.PropsWithChildren<SwiperProps>
- >;
- declare const SwiperSlide: React.FunctionComponent<SwiperSlideProps>;
- declare const useSwiper: () => SwiperClass;
- declare const useSwiperSlide: () => SlideData;
- export {
- Swiper,
- SwiperSlide,
- SwiperProps,
- SwiperSlideProps,
- SwiperRef,
- useSwiper,
- useSwiperSlide,
- SwiperClass,
- };
|