swiper-svelte.d.ts 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
  1. import { SvelteComponentTyped } from 'svelte';
  2. import { SwiperOptions, Swiper as SwiperClass } from '../types/';
  3. // @ts-ignore
  4. interface SwiperProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {}
  5. interface SwiperProps extends SwiperOptions {}
  6. // @ts-ignore
  7. interface SwiperSlideProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
  8. /**
  9. * Enables additional wrapper required for zoom mode
  10. *
  11. * @default false
  12. */
  13. zoom?: boolean;
  14. /**
  15. * Slide's index in slides array/collection
  16. *
  17. * @default false
  18. */
  19. virtualIndex?: number;
  20. }
  21. declare class Swiper extends SvelteComponentTyped<
  22. SwiperProps,
  23. {
  24. swiper: CustomEvent<void>;
  25. /**
  26. * Event will be fired in when autoplay started
  27. */
  28. autoplayStart: CustomEvent<[swiper: SwiperClass]>;
  29. /**
  30. * Event will be fired when autoplay stopped
  31. */
  32. autoplayStop: CustomEvent<[swiper: SwiperClass]>;
  33. /**
  34. * Event will be fired on autoplay pause (on mouse/pointer enter), when `pauseOnMouseEnter` enabled
  35. */
  36. autoplayPause: CustomEvent<[swiper: SwiperClass]>;
  37. /**
  38. * Event will be fired on autoplay resume (on mouse/pointer leave), when `pauseOnMouseEnter` enabled
  39. */
  40. autoplayResume: CustomEvent<[swiper: SwiperClass]>;
  41. /**
  42. * Event will be fired when slide changed with autoplay
  43. */
  44. autoplay: CustomEvent<[swiper: SwiperClass]>;/**
  45. * Event will be fired on window hash change
  46. */
  47. hashChange: CustomEvent<[swiper: SwiperClass]>;
  48. /**
  49. * Event will be fired when swiper updates the hash
  50. */
  51. hashSet: CustomEvent<[swiper: SwiperClass]>;/**
  52. * Event will be fired in the beginning of lazy loading of image
  53. */
  54. lazyImageLoad: CustomEvent<[swiper: SwiperClass, slideEl: HTMLElement, imageEl: HTMLElement]>;
  55. /**
  56. * Event will be fired when lazy loading image will be loaded
  57. */
  58. lazyImageReady: CustomEvent<[swiper: SwiperClass, slideEl: HTMLElement, imageEl: HTMLElement]>;/**
  59. * Event will be fired on key press
  60. */
  61. keyPress: CustomEvent<[swiper: SwiperClass, keyCode: string]>;/**
  62. * Event will be fired on navigation hide
  63. */
  64. navigationHide: CustomEvent<[swiper: SwiperClass]>;
  65. /**
  66. * Event will be fired on navigation show
  67. */
  68. navigationShow: CustomEvent<[swiper: SwiperClass]>;
  69. /**
  70. * Event will be fired on navigation prev button click
  71. */
  72. navigationPrev: CustomEvent<[swiper: SwiperClass]>;
  73. /**
  74. * Event will be fired on navigation next button click
  75. */
  76. navigationNext: CustomEvent<[swiper: SwiperClass]>;/**
  77. * Event will be fired after pagination rendered
  78. */
  79. paginationRender: CustomEvent<[swiper: SwiperClass, paginationEl: HTMLElement]>;
  80. /**
  81. * Event will be fired when pagination updated
  82. */
  83. paginationUpdate: CustomEvent<[swiper: SwiperClass, paginationEl: HTMLElement]>;
  84. /**
  85. * Event will be fired on pagination hide
  86. */
  87. paginationHide: CustomEvent<[swiper: SwiperClass]>;
  88. /**
  89. * Event will be fired on pagination show
  90. */
  91. paginationShow: CustomEvent<[swiper: SwiperClass]>;/**
  92. * Event will be fired on mousewheel scroll
  93. */
  94. scroll: CustomEvent<[swiper: SwiperClass, event: WheelEvent]>;/**
  95. * Event will be fired on draggable scrollbar drag start
  96. */
  97. scrollbarDragStart: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
  98. /**
  99. * Event will be fired on draggable scrollbar drag move
  100. */
  101. scrollbarDragMove: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
  102. /**
  103. * Event will be fired on draggable scrollbar drag end
  104. */
  105. scrollbarDragEnd: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;/**
  106. * Event will be fired on zoom change
  107. */
  108. zoomChange: CustomEvent<[swiper: SwiperClass, scale: number, imageEl: HTMLElement, slideEl: HTMLElement]>;
  109. /**
  110. * Fired right after Swiper initialization.
  111. * @note Note that with `swiper.on('init')` syntax it will
  112. * work only in case you set `init: false` parameter.
  113. *
  114. * @example
  115. * ```js
  116. * const swiper = new Swiper('.swiper', {
  117. * init: false,
  118. * // other parameters
  119. * });
  120. * swiper.on('init', function() {
  121. * // do something
  122. * });
  123. * // init Swiper
  124. * swiper.init();
  125. * ```
  126. *
  127. * @example
  128. * ```js
  129. * // Otherwise use it as the parameter:
  130. * const swiper = new Swiper('.swiper', {
  131. * // other parameters
  132. * on: {
  133. * init: function () {
  134. * // do something
  135. * },
  136. * }
  137. * });
  138. * ```
  139. */
  140. init: CustomEvent<[swiper: SwiperClass]>;
  141. /**
  142. * Event will be fired right before Swiper destroyed
  143. */
  144. beforeDestroy: CustomEvent<[swiper: SwiperClass]>;
  145. /**
  146. * Event will be fired when currently active slide is changed
  147. */
  148. slideChange: CustomEvent<[swiper: SwiperClass]>;
  149. /**
  150. * Event will be fired in the beginning of animation to other slide (next or previous).
  151. */
  152. slideChangeTransitionStart: CustomEvent<[swiper: SwiperClass]>;
  153. /**
  154. * Event will be fired after animation to other slide (next or previous).
  155. */
  156. slideChangeTransitionEnd: CustomEvent<[swiper: SwiperClass]>;
  157. /**
  158. * Same as "slideChangeTransitionStart" but for "forward" direction only
  159. */
  160. slideNextTransitionStart: CustomEvent<[swiper: SwiperClass]>;
  161. /**
  162. * Same as "slideChangeTransitionEnd" but for "forward" direction only
  163. */
  164. slideNextTransitionEnd: CustomEvent<[swiper: SwiperClass]>;
  165. /**
  166. * Same as "slideChangeTransitionStart" but for "backward" direction only
  167. */
  168. slidePrevTransitionStart: CustomEvent<[swiper: SwiperClass]>;
  169. /**
  170. * Same as "slideChangeTransitionEnd" but for "backward" direction only
  171. */
  172. slidePrevTransitionEnd: CustomEvent<[swiper: SwiperClass]>;
  173. /**
  174. * Event will be fired in the beginning of transition.
  175. */
  176. transitionStart: CustomEvent<[swiper: SwiperClass]>;
  177. /**
  178. * Event will be fired after transition.
  179. */
  180. transitionEnd: CustomEvent<[swiper: SwiperClass]>;
  181. /**
  182. * Event will be fired when user touch Swiper. Receives `touchstart` event as an arguments.
  183. */
  184. touchStart: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
  185. /**
  186. * Event will be fired when user touch and move finger over Swiper. Receives `touchmove` event as an arguments.
  187. */
  188. touchMove: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
  189. /**
  190. * Event will be fired when user touch and move finger over Swiper in direction opposite to direction parameter. Receives `touchmove` event as an arguments.
  191. */
  192. touchMoveOpposite: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
  193. /**
  194. * Event will be fired when user touch and move finger over Swiper and move it. Receives `touchmove` event as an arguments.
  195. */
  196. sliderMove: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
  197. /**
  198. * Event will be fired when user release Swiper. Receives `touchend` event as an arguments.
  199. */
  200. touchEnd: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
  201. /**
  202. * Event will be fired when user click/tap on Swiper. Receives `touchend` event as an arguments.
  203. */
  204. click: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
  205. /**
  206. * Event will be fired when user click/tap on Swiper. Receives `touchend` event as an arguments.
  207. */
  208. tap: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
  209. /**
  210. * Event will be fired when user double tap on Swiper's container. Receives `touchend` event as an arguments
  211. */
  212. doubleTap: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
  213. /**
  214. * Event will be fired right after all inner images are loaded. updateOnImagesReady should be also enabled
  215. */
  216. imagesReady: CustomEvent<[swiper: SwiperClass]>;
  217. /**
  218. * Event will be fired when Swiper progress is changed, as an arguments it receives progress that is always from 0 to 1
  219. */
  220. progress: CustomEvent<[swiper: SwiperClass, progress: number]>;
  221. /**
  222. * Event will be fired when Swiper reach its beginning (initial position)
  223. */
  224. reachBeginning: CustomEvent<[swiper: SwiperClass]>;
  225. /**
  226. * Event will be fired when Swiper reach last slide
  227. */
  228. reachEnd: CustomEvent<[swiper: SwiperClass]>;
  229. /**
  230. * Event will be fired when Swiper goes to beginning or end position
  231. */
  232. toEdge: CustomEvent<[swiper: SwiperClass]>;
  233. /**
  234. * Event will be fired when Swiper goes from beginning or end position
  235. */
  236. fromEdge: CustomEvent<[swiper: SwiperClass]>;
  237. /**
  238. * Event will be fired when swiper's wrapper change its position. Receives current translate value as an arguments
  239. */
  240. setTranslate: CustomEvent<[swiper: SwiperClass, translate: number]>;
  241. /**
  242. * Event will be fired everytime when swiper starts animation. Receives current transition duration (in ms) as an arguments
  243. */
  244. setTransition: CustomEvent<[swiper: SwiperClass, transition: number]>;
  245. /**
  246. * Event will be fired on window resize right before swiper's onresize manipulation
  247. */
  248. resize: CustomEvent<[swiper: SwiperClass]>;
  249. /**
  250. * Event will be fired if observer is enabled and it detects DOM mutations
  251. */
  252. observerUpdate: CustomEvent<[swiper: SwiperClass]>;
  253. /**
  254. * Event will be fired right before "loop fix"
  255. */
  256. beforeLoopFix: CustomEvent<[swiper: SwiperClass]>;
  257. /**
  258. * Event will be fired after "loop fix"
  259. */
  260. loopFix: CustomEvent<[swiper: SwiperClass]>;
  261. /**
  262. * Event will be fired on breakpoint change
  263. */
  264. breakpoint: CustomEvent<[swiper: SwiperClass, breakpointParams: SwiperOptions]>;
  265. /**
  266. * !INTERNAL: Event will fired right before breakpoint change
  267. */
  268. _beforeBreakpoint: CustomEvent<[swiper: SwiperClass, breakpointParams: SwiperOptions]>;
  269. /**
  270. * !INTERNAL: Event will fired after setting CSS classes on swiper container element
  271. */
  272. _containerClasses: CustomEvent<[swiper: SwiperClass, classNames: string]>;
  273. /**
  274. * !INTERNAL: Event will fired after setting CSS classes on swiper slide element
  275. */
  276. _slideClass: CustomEvent<[swiper: SwiperClass, slideEl: HTMLElement, classNames: string]>;
  277. /**
  278. * !INTERNAL: Event will fired after setting CSS classes on all swiper slides
  279. */
  280. _slideClasses: CustomEvent<[
  281. swiper: SwiperClass,
  282. slides: { slideEl: HTMLElement; classNames: string; index: number }[],
  283. ]>;
  284. /**
  285. * !INTERNAL: Event will fired as soon as swiper instance available (before init)
  286. */
  287. _swiper: CustomEvent<[swiper: SwiperClass]>;
  288. /**
  289. * !INTERNAL: Event will be fired on free mode touch end (release) and there will no be momentum
  290. */
  291. _freeModeNoMomentumRelease: CustomEvent<[swiper: SwiperClass]>;
  292. /**
  293. * Event will fired on active index change
  294. */
  295. activeIndexChange: CustomEvent<[swiper: SwiperClass]>;
  296. /**
  297. * Event will fired on snap index change
  298. */
  299. snapIndexChange: CustomEvent<[swiper: SwiperClass]>;
  300. /**
  301. * Event will fired on real index change
  302. */
  303. realIndexChange: CustomEvent<[swiper: SwiperClass]>;
  304. /**
  305. * Event will fired right after initialization
  306. */
  307. afterInit: CustomEvent<[swiper: SwiperClass]>;
  308. /**
  309. * Event will fired right before initialization
  310. */
  311. beforeInit: CustomEvent<[swiper: SwiperClass]>;
  312. /**
  313. * Event will fired before resize handler
  314. */
  315. beforeResize: CustomEvent<[swiper: SwiperClass]>;
  316. /**
  317. * Event will fired before slide change transition start
  318. */
  319. beforeSlideChangeStart: CustomEvent<[swiper: SwiperClass]>;
  320. /**
  321. * Event will fired before transition start
  322. */
  323. beforeTransitionStart: CustomEvent<[swiper: SwiperClass, speed: number, internal: any]>; // what is internal?
  324. /**
  325. * Event will fired on direction change
  326. */
  327. changeDirection: CustomEvent<[swiper: SwiperClass]>;
  328. /**
  329. * Event will be fired when user double click/tap on Swiper
  330. */
  331. doubleClick: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
  332. /**
  333. * Event will be fired on swiper destroy
  334. */
  335. destroy: CustomEvent<[swiper: SwiperClass]>;
  336. /**
  337. * Event will be fired on momentum bounce
  338. */
  339. momentumBounce: CustomEvent<[swiper: SwiperClass]>;
  340. /**
  341. * Event will be fired on orientation change (e.g. landscape -> portrait)
  342. */
  343. orientationchange: CustomEvent<[swiper: SwiperClass]>;
  344. /**
  345. * Event will be fired in the beginning of animation of resetting slide to current one
  346. */
  347. slideResetTransitionStart: CustomEvent<[swiper: SwiperClass]>;
  348. /**
  349. * Event will be fired in the end of animation of resetting slide to current one
  350. */
  351. slideResetTransitionEnd: CustomEvent<[swiper: SwiperClass]>;
  352. /**
  353. * Event will be fired with first touch/drag move
  354. */
  355. sliderFirstMove: CustomEvent<[swiper: SwiperClass, event: TouchEvent]>;
  356. /**
  357. * Event will be fired when number of slides has changed
  358. */
  359. slidesLengthChange: CustomEvent<[swiper: SwiperClass]>;
  360. /**
  361. * Event will be fired when slides grid has changed
  362. */
  363. slidesGridLengthChange: CustomEvent<[swiper: SwiperClass]>;
  364. /**
  365. * Event will be fired when snap grid has changed
  366. */
  367. snapGridLengthChange: CustomEvent<[swiper: SwiperClass]>;
  368. /**
  369. * Event will be fired after swiper.update() call
  370. */
  371. update: CustomEvent<[swiper: SwiperClass]>;
  372. /**
  373. * Event will be fired when swiper is locked (when `watchOverflow` enabled)
  374. */
  375. lock: CustomEvent<[swiper: SwiperClass]>;
  376. /**
  377. * Event will be fired when swiper is unlocked (when `watchOverflow` enabled)
  378. */
  379. unlock: CustomEvent<[swiper: SwiperClass]>;
  380. },
  381. {
  382. default: {
  383. virtualData: {
  384. slides: any[];
  385. offset: number;
  386. from: number;
  387. to: number;
  388. slidesGrid: number[];
  389. };
  390. };
  391. 'container-start': {};
  392. 'wrapper-start': {};
  393. 'wrapper-end': {};
  394. 'container-end': {};
  395. }
  396. > {}
  397. declare class SwiperSlide extends SvelteComponentTyped<
  398. SwiperSlideProps,
  399. {},
  400. {
  401. default: {
  402. data: {
  403. isActive: boolean;
  404. isVisible: boolean;
  405. isDuplicate: boolean;
  406. isPrev: boolean;
  407. isNext: boolean;
  408. };
  409. };
  410. }
  411. > {}
  412. export { Swiper, SwiperSlide };