swiper-solid.d.ts 14 KB

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