swiper-react.d.ts 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  1. import * as React from 'react';
  2. import type { SwiperOptions, Swiper as SwiperClass } from './types/index.d.ts';
  3. type SwiperProps = Omit<
  4. React.HTMLAttributes<HTMLElement>,
  5. | 'onProgress'
  6. | 'onClick'
  7. | 'onTouchEnd'
  8. | 'onTouchMove'
  9. | 'onTouchStart'
  10. | 'onTransitionEnd'
  11. | 'onKeyPress'
  12. | 'onDoubleClick'
  13. | 'onScroll'
  14. | 'onResize'
  15. > &
  16. SwiperOptions & {
  17. /**
  18. * Swiper container tag
  19. *
  20. * @default 'div'
  21. */
  22. tag?: string;
  23. /**
  24. * Swiper wrapper tag
  25. *
  26. * @default 'div'
  27. */
  28. wrapperTag?: string;
  29. /**
  30. * Get Swiper instance
  31. */
  32. onSwiper?: (swiper: SwiperClass) => void;
  33. /**
  34. * Event will be fired in when autoplay started
  35. */
  36. onAutoplayStart?: (swiper: SwiperClass) => void;
  37. /**
  38. * Event will be fired when autoplay stopped
  39. */
  40. onAutoplayStop?: (swiper: SwiperClass) => void;
  41. /**
  42. * Event will be fired on autoplay pause
  43. */
  44. onAutoplayPause?: (swiper: SwiperClass) => void;
  45. /**
  46. * Event will be fired on autoplay resume
  47. */
  48. onAutoplayResume?: (swiper: SwiperClass) => void;
  49. /**
  50. * 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
  51. */
  52. onAutoplayTimeLeft?: (swiper: SwiperClass, timeLeft: number, percentage: number) => void;
  53. /**
  54. * Event will be fired when slide changed with autoplay
  55. */
  56. onAutoplay?: (swiper: SwiperClass) => void;/**
  57. * Event will be fired on window hash change
  58. */
  59. onHashChange?: (swiper: SwiperClass) => void;
  60. /**
  61. * Event will be fired when swiper updates the hash
  62. */
  63. onHashSet?: (swiper: SwiperClass) => void;/**
  64. * Event will be fired on key press
  65. */
  66. onKeyPress?: (swiper: SwiperClass, keyCode: string) => void;/**
  67. * Event will be fired on mousewheel scroll
  68. */
  69. onScroll?: (swiper: SwiperClass, event: WheelEvent) => void;/**
  70. * Event will be fired on navigation hide
  71. */
  72. onNavigationHide?: (swiper: SwiperClass) => void;
  73. /**
  74. * Event will be fired on navigation show
  75. */
  76. onNavigationShow?: (swiper: SwiperClass) => void;
  77. /**
  78. * Event will be fired on navigation prev button click
  79. */
  80. onNavigationPrev?: (swiper: SwiperClass) => void;
  81. /**
  82. * Event will be fired on navigation next button click
  83. */
  84. onNavigationNext?: (swiper: SwiperClass) => void;/**
  85. * Event will be fired after pagination rendered
  86. */
  87. onPaginationRender?: (swiper: SwiperClass, paginationEl: HTMLElement) => void;
  88. /**
  89. * Event will be fired when pagination updated
  90. */
  91. onPaginationUpdate?: (swiper: SwiperClass, paginationEl: HTMLElement) => void;
  92. /**
  93. * Event will be fired on pagination hide
  94. */
  95. onPaginationHide?: (swiper: SwiperClass) => void;
  96. /**
  97. * Event will be fired on pagination show
  98. */
  99. onPaginationShow?: (swiper: SwiperClass) => void;/**
  100. * Event will be fired on draggable scrollbar drag start
  101. */
  102. onScrollbarDragStart?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
  103. /**
  104. * Event will be fired on draggable scrollbar drag move
  105. */
  106. onScrollbarDragMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
  107. /**
  108. * Event will be fired on draggable scrollbar drag end
  109. */
  110. onScrollbarDragEnd?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;/**
  111. * Event will be fired on zoom change
  112. */
  113. onZoomChange?: (swiper: SwiperClass, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;
  114. /**
  115. * Fired right after Swiper initialization.
  116. * @note Note that with `swiper.on('init')` syntax it will
  117. * work only in case you set `init: false` parameter.
  118. *
  119. * @example
  120. * ```js
  121. * const swiper = new Swiper('.swiper', {
  122. * init: false,
  123. * // other parameters
  124. * });
  125. * swiper.on('init', function() {
  126. * // do something
  127. * });
  128. * // init Swiper
  129. * swiper.init();
  130. * ```
  131. *
  132. * @example
  133. * ```js
  134. * // Otherwise use it as the parameter:
  135. * const swiper = new Swiper('.swiper', {
  136. * // other parameters
  137. * on: {
  138. * init: function () {
  139. * // do something
  140. * },
  141. * }
  142. * });
  143. * ```
  144. */
  145. onInit?: (swiper: SwiperClass) => any;
  146. /**
  147. * Event will be fired right before Swiper destroyed
  148. */
  149. onBeforeDestroy?: (swiper: SwiperClass) => void;
  150. /**
  151. * Event will be fired after slides and their sizes are calculated and updated
  152. */
  153. onSlidesUpdated?: (swiper: SwiperClass) => void;
  154. /**
  155. * Event will be fired when currently active slide is changed
  156. */
  157. onSlideChange?: (swiper: SwiperClass) => void;
  158. /**
  159. * Event will be fired in the beginning of animation to other slide (next or previous).
  160. */
  161. onSlideChangeTransitionStart?: (swiper: SwiperClass) => void;
  162. /**
  163. * Event will be fired after animation to other slide (next or previous).
  164. */
  165. onSlideChangeTransitionEnd?: (swiper: SwiperClass) => void;
  166. /**
  167. * Same as "slideChangeTransitionStart" but for "forward" direction only
  168. */
  169. onSlideNextTransitionStart?: (swiper: SwiperClass) => void;
  170. /**
  171. * Same as "slideChangeTransitionEnd" but for "forward" direction only
  172. */
  173. onSlideNextTransitionEnd?: (swiper: SwiperClass) => void;
  174. /**
  175. * Same as "slideChangeTransitionStart" but for "backward" direction only
  176. */
  177. onSlidePrevTransitionStart?: (swiper: SwiperClass) => void;
  178. /**
  179. * Same as "slideChangeTransitionEnd" but for "backward" direction only
  180. */
  181. onSlidePrevTransitionEnd?: (swiper: SwiperClass) => void;
  182. /**
  183. * Event will be fired in the beginning of transition.
  184. */
  185. onTransitionStart?: (swiper: SwiperClass) => void;
  186. /**
  187. * Event will be fired after transition.
  188. */
  189. onTransitionEnd?: (swiper: SwiperClass) => void;
  190. /**
  191. * Event will be fired when user touch Swiper. Receives `pointerdown` event as an arguments.
  192. */
  193. onTouchStart?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
  194. /**
  195. * Event will be fired when user touch and move finger over Swiper. Receives `pointermove` event as an arguments.
  196. */
  197. onTouchMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
  198. /**
  199. * Event will be fired when user touch and move finger over Swiper in direction opposite to direction parameter. Receives `pointermove` event as an arguments.
  200. */
  201. onTouchMoveOpposite?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
  202. /**
  203. * Event will be fired when user touch and move finger over Swiper and move it. Receives `pointermove` event as an arguments.
  204. */
  205. onSliderMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
  206. /**
  207. * Event will be fired when user release Swiper. Receives `pointerup` event as an arguments.
  208. */
  209. onTouchEnd?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
  210. /**
  211. * Event will be fired when user click/tap on Swiper. Receives `pointerup` event as an arguments.
  212. */
  213. onClick?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
  214. /**
  215. * Event will be fired when user click/tap on Swiper. Receives `pointerup` event as an arguments.
  216. */
  217. onTap?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
  218. /**
  219. * Event will be fired when user double tap on Swiper's container. Receives `pointerup` event as an arguments
  220. */
  221. onDoubleTap?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
  222. /**
  223. * Event will be fired when Swiper progress is changed, as an arguments it receives progress that is always from 0 to 1
  224. */
  225. onProgress?: (swiper: SwiperClass, progress: number) => void;
  226. /**
  227. * Event will be fired when Swiper reach its beginning (initial position)
  228. */
  229. onReachBeginning?: (swiper: SwiperClass) => void;
  230. /**
  231. * Event will be fired when Swiper reach last slide
  232. */
  233. onReachEnd?: (swiper: SwiperClass) => void;
  234. /**
  235. * Event will be fired when Swiper goes to beginning or end position
  236. */
  237. onToEdge?: (swiper: SwiperClass) => void;
  238. /**
  239. * Event will be fired when Swiper goes from beginning or end position
  240. */
  241. onFromEdge?: (swiper: SwiperClass) => void;
  242. /**
  243. * Event will be fired when swiper's wrapper change its position. Receives current translate value as an arguments
  244. */
  245. onSetTranslate?: (swiper: SwiperClass, translate: number) => void;
  246. /**
  247. * Event will be fired everytime when swiper starts animation. Receives current transition duration (in ms) as an arguments
  248. */
  249. onSetTransition?: (swiper: SwiperClass, transition: number) => void;
  250. /**
  251. * Event will be fired on window resize right before swiper's onresize manipulation
  252. */
  253. onResize?: (swiper: SwiperClass) => void;
  254. /**
  255. * Event will be fired if observer is enabled and it detects DOM mutations
  256. */
  257. onObserverUpdate?: (swiper: SwiperClass) => void;
  258. /**
  259. * Event will be fired right before "loop fix"
  260. */
  261. onBeforeLoopFix?: (swiper: SwiperClass) => void;
  262. /**
  263. * Event will be fired after "loop fix"
  264. */
  265. onLoopFix?: (swiper: SwiperClass) => void;
  266. /**
  267. * Event will be fired on breakpoint change
  268. */
  269. onBreakpoint?: (swiper: SwiperClass, breakpointParams: SwiperOptions) => void;
  270. /**
  271. * !INTERNAL: Event will fired right before breakpoint change
  272. */
  273. _beforeBreakpoint?: (swiper: SwiperClass, breakpointParams: SwiperOptions) => void;
  274. /**
  275. * !INTERNAL: Event will fired after setting CSS classes on swiper container element
  276. */
  277. _containerClasses?: (swiper: SwiperClass, classNames: string) => void;
  278. /**
  279. * !INTERNAL: Event will fired after setting CSS classes on swiper slide element
  280. */
  281. _slideClass?: (swiper: SwiperClass, slideEl: HTMLElement, classNames: string) => void;
  282. /**
  283. * !INTERNAL: Event will fired after setting CSS classes on all swiper slides
  284. */
  285. _slideClasses?: (
  286. swiper: SwiperClass,
  287. slides: { slideEl: HTMLElement; classNames: string; index: number }[],
  288. ) => void;
  289. /**
  290. * !INTERNAL: Event will fired as soon as swiper instance available (before init)
  291. */
  292. _swiper?: (swiper: SwiperClass) => void;
  293. /**
  294. * !INTERNAL: Event will be fired on free mode touch end (release) and there will no be momentum
  295. */
  296. _freeModeNoMomentumRelease?: (swiper: SwiperClass) => void;
  297. /**
  298. * Event will fired on active index change
  299. */
  300. onActiveIndexChange?: (swiper: SwiperClass) => void;
  301. /**
  302. * Event will fired on snap index change
  303. */
  304. onSnapIndexChange?: (swiper: SwiperClass) => void;
  305. /**
  306. * Event will fired on real index change
  307. */
  308. onRealIndexChange?: (swiper: SwiperClass) => void;
  309. /**
  310. * Event will fired right after initialization
  311. */
  312. onAfterInit?: (swiper: SwiperClass) => void;
  313. /**
  314. * Event will fired right before initialization
  315. */
  316. onBeforeInit?: (swiper: SwiperClass) => void;
  317. /**
  318. * Event will fired before resize handler
  319. */
  320. onBeforeResize?: (swiper: SwiperClass) => void;
  321. /**
  322. * Event will fired before slide change transition start
  323. */
  324. onBeforeSlideChangeStart?: (swiper: SwiperClass) => void;
  325. /**
  326. * Event will fired before transition start
  327. */
  328. onBeforeTransitionStart?: (swiper: SwiperClass, speed: number, internal: any) => void; // what is internal?
  329. /**
  330. * Event will fired on direction change
  331. */
  332. onChangeDirection?: (swiper: SwiperClass) => void;
  333. /**
  334. * Event will be fired when user double click/tap on Swiper
  335. */
  336. onDoubleClick?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
  337. /**
  338. * Event will be fired on swiper destroy
  339. */
  340. onDestroy?: (swiper: SwiperClass) => void;
  341. /**
  342. * Event will be fired on momentum bounce
  343. */
  344. onMomentumBounce?: (swiper: SwiperClass) => void;
  345. /**
  346. * Event will be fired on orientation change (e.g. landscape -> portrait)
  347. */
  348. onOrientationchange?: (swiper: SwiperClass) => void;
  349. /**
  350. * Event will be fired in the beginning of animation of resetting slide to current one
  351. */
  352. onSlideResetTransitionStart?: (swiper: SwiperClass) => void;
  353. /**
  354. * Event will be fired in the end of animation of resetting slide to current one
  355. */
  356. onSlideResetTransitionEnd?: (swiper: SwiperClass) => void;
  357. /**
  358. * Event will be fired with first touch/drag move
  359. */
  360. onSliderFirstMove?: (swiper: SwiperClass, event: TouchEvent) => void;
  361. /**
  362. * Event will be fired when number of slides has changed
  363. */
  364. onSlidesLengthChange?: (swiper: SwiperClass) => void;
  365. /**
  366. * Event will be fired when slides grid has changed
  367. */
  368. onSlidesGridLengthChange?: (swiper: SwiperClass) => void;
  369. /**
  370. * Event will be fired when snap grid has changed
  371. */
  372. onSnapGridLengthChange?: (swiper: SwiperClass) => void;
  373. /**
  374. * Event will be fired after swiper.update() call
  375. */
  376. onUpdate?: (swiper: SwiperClass) => void;
  377. /**
  378. * Event will be fired when swiper is locked (when `watchOverflow` enabled)
  379. */
  380. onLock?: (swiper: SwiperClass) => void;
  381. /**
  382. * Event will be fired when swiper is unlocked (when `watchOverflow` enabled)
  383. */
  384. onUnlock?: (swiper: SwiperClass) => void;
  385. };
  386. interface SlideData {
  387. isActive: boolean;
  388. isVisible: boolean;
  389. isPrev: boolean;
  390. isNext: boolean;
  391. }
  392. type SwiperSlideProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {
  393. /**
  394. * Slide tag
  395. *
  396. * @default 'div'
  397. */
  398. tag?: string;
  399. /**
  400. * Enables additional wrapper required for zoom mode
  401. *
  402. * @default false
  403. */
  404. zoom?: boolean;
  405. /**
  406. * Adds lazy preloader to the slide
  407. *
  408. * @default false
  409. */
  410. lazy?: boolean;
  411. /**
  412. * Slide's index in slides array/collection
  413. *
  414. * @default false
  415. */
  416. virtualIndex?: number;
  417. /**
  418. * Slide's child element or render function
  419. *
  420. * @default undefined
  421. */
  422. children?: React.ReactNode | ((slideData: SlideData) => React.ReactNode);
  423. };
  424. interface SwiperRef extends React.HTMLAttributes<HTMLElement> {
  425. swiper: SwiperClass;
  426. }
  427. declare const Swiper: React.FunctionComponent<
  428. React.RefAttributes<SwiperRef> & React.PropsWithChildren<SwiperProps>
  429. >;
  430. declare const SwiperSlide: React.FunctionComponent<SwiperSlideProps>;
  431. declare const useSwiper: () => SwiperClass;
  432. declare const useSwiperSlide: () => SlideData;
  433. export {
  434. Swiper,
  435. SwiperSlide,
  436. SwiperProps,
  437. SwiperSlideProps,
  438. SwiperRef,
  439. useSwiper,
  440. useSwiperSlide,
  441. SwiperClass,
  442. };