swiper-element.d.ts 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  1. // @ts-ignore
  2. import { Swiper, SwiperOptions } from './types/index.d.ts';
  3. declare const register: () => void;
  4. // prettier-ignore
  5. interface SwiperContainerEventMap extends Omit<HTMLElementEventMap, 'click' | 'progress' | 'keypress' | 'resize' | 'touchstart' | 'touchmove' | 'touchend' | 'transitionend' | 'transitionstart'> {
  6. /**
  7. * Event will be fired in when autoplay started
  8. */
  9. autoplaystart: CustomEvent<[swiper: Swiper]>;
  10. /**
  11. * Event will be fired when autoplay stopped
  12. */
  13. autoplaystop: CustomEvent<[swiper: Swiper]>;
  14. /**
  15. * Event will be fired on autoplay pause
  16. */
  17. autoplaypause: CustomEvent<[swiper: Swiper]>;
  18. /**
  19. * Event will be fired on autoplay resume
  20. */
  21. autoplayresume: CustomEvent<[swiper: Swiper]>;
  22. /**
  23. * 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
  24. */
  25. autoplaytimeleft: CustomEvent<[swiper: Swiper, timeLeft: number, percentage: number]>;
  26. /**
  27. * Event will be fired when slide changed with autoplay
  28. */
  29. autoplay: CustomEvent<[swiper: Swiper]>;/**
  30. * Event will be fired on window hash change
  31. */
  32. hashchange: CustomEvent<[swiper: Swiper]>;
  33. /**
  34. * Event will be fired when swiper updates the hash
  35. */
  36. hashset: CustomEvent<[swiper: Swiper]>;/**
  37. * Event will be fired on key press
  38. */
  39. keypress: CustomEvent<[swiper: Swiper, keyCode: string]>;/**
  40. * Event will be fired on mousewheel scroll
  41. */
  42. scroll: CustomEvent<[swiper: Swiper, event: WheelEvent]>;/**
  43. * Event will be fired on navigation hide
  44. */
  45. navigationhide: CustomEvent<[swiper: Swiper]>;
  46. /**
  47. * Event will be fired on navigation show
  48. */
  49. navigationshow: CustomEvent<[swiper: Swiper]>;
  50. /**
  51. * Event will be fired on navigation prev button click
  52. */
  53. navigationprev: CustomEvent<[swiper: Swiper]>;
  54. /**
  55. * Event will be fired on navigation next button click
  56. */
  57. navigationnext: CustomEvent<[swiper: Swiper]>;/**
  58. * Event will be fired after pagination rendered
  59. */
  60. paginationrender: CustomEvent<[swiper: Swiper, paginationEl: HTMLElement]>;
  61. /**
  62. * Event will be fired when pagination updated
  63. */
  64. paginationupdate: CustomEvent<[swiper: Swiper, paginationEl: HTMLElement]>;
  65. /**
  66. * Event will be fired on pagination hide
  67. */
  68. paginationhide: CustomEvent<[swiper: Swiper]>;
  69. /**
  70. * Event will be fired on pagination show
  71. */
  72. paginationshow: CustomEvent<[swiper: Swiper]>;/**
  73. * Event will be fired on draggable scrollbar drag start
  74. */
  75. scrollbardragstart: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;
  76. /**
  77. * Event will be fired on draggable scrollbar drag move
  78. */
  79. scrollbardragmove: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;
  80. /**
  81. * Event will be fired on draggable scrollbar drag end
  82. */
  83. scrollbardragend: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;/**
  84. * Event will be fired on zoom change
  85. */
  86. zoomchange: CustomEvent<[swiper: Swiper, scale: number, imageEl: HTMLElement, slideEl: HTMLElement]>;
  87. /**
  88. * Fired right after Swiper initialization.
  89. * @note Note that with `swiper.on('init')` syntax it will
  90. * work only in case you set `init: false` parameter.
  91. *
  92. * @example
  93. * ```js
  94. * const swiper = new Swiper('.swiper', {
  95. * init: CustomEvent<[false,
  96. * // other parameters
  97. * }]>;
  98. * swiper.on('init', function() {
  99. * // do something
  100. * });
  101. * // init Swiper
  102. * swiper.init();
  103. * ```
  104. *
  105. * @example
  106. * ```js
  107. * // Otherwise use it as the parameter:
  108. * const swiper = new Swiper('.swiper', {
  109. * // other parameters
  110. * on: CustomEvent<[{
  111. * init: function {
  112. * // do something
  113. * },
  114. * }
  115. * })]>;
  116. * ```
  117. */
  118. init: CustomEvent<[swiper: Swiper]>;
  119. /**
  120. * Event will be fired right before Swiper destroyed
  121. */
  122. beforedestroy: CustomEvent<[swiper: Swiper]>;
  123. /**
  124. * Event will be fired after slides and their sizes are calculated and updated
  125. */
  126. slidesupdated: CustomEvent<[swiper: Swiper]>;
  127. /**
  128. * Event will be fired when currently active slide is changed
  129. */
  130. slidechange: CustomEvent<[swiper: Swiper]>;
  131. /**
  132. * Event will be fired in the beginning of animation to other slide (next or previous).
  133. */
  134. slidechangetransitionstart: CustomEvent<[swiper: Swiper]>;
  135. /**
  136. * Event will be fired after animation to other slide (next or previous).
  137. */
  138. slidechangetransitionend: CustomEvent<[swiper: Swiper]>;
  139. /**
  140. * Same as "slideChangeTransitionStart" but for "forward" direction only
  141. */
  142. slidenexttransitionstart: CustomEvent<[swiper: Swiper]>;
  143. /**
  144. * Same as "slideChangeTransitionEnd" but for "forward" direction only
  145. */
  146. slidenexttransitionend: CustomEvent<[swiper: Swiper]>;
  147. /**
  148. * Same as "slideChangeTransitionStart" but for "backward" direction only
  149. */
  150. slideprevtransitionstart: CustomEvent<[swiper: Swiper]>;
  151. /**
  152. * Same as "slideChangeTransitionEnd" but for "backward" direction only
  153. */
  154. slideprevtransitionend: CustomEvent<[swiper: Swiper]>;
  155. /**
  156. * Event will be fired in the beginning of transition.
  157. */
  158. transitionstart: CustomEvent<[swiper: Swiper]>;
  159. /**
  160. * Event will be fired after transition.
  161. */
  162. transitionend: CustomEvent<[swiper: Swiper]>;
  163. /**
  164. * Event will be fired when user touch Swiper. Receives `pointerdown` event as an arguments.
  165. */
  166. touchstart: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;
  167. /**
  168. * Event will be fired when user touch and move finger over Swiper. Receives `pointermove` event as an arguments.
  169. */
  170. touchmove: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;
  171. /**
  172. * Event will be fired when user touch and move finger over Swiper in direction opposite to direction parameter. Receives `pointermove` event as an arguments.
  173. */
  174. touchmoveopposite: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;
  175. /**
  176. * Event will be fired when user touch and move finger over Swiper and move it. Receives `pointermove` event as an arguments.
  177. */
  178. slidermove: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;
  179. /**
  180. * Event will be fired when user release Swiper. Receives `pointerup` event as an arguments.
  181. */
  182. touchend: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;
  183. /**
  184. * Event will be fired when user click/tap on Swiper. Receives `pointerup` event as an arguments.
  185. */
  186. click: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;
  187. /**
  188. * Event will be fired when user click/tap on Swiper. Receives `pointerup` event as an arguments.
  189. */
  190. tap: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;
  191. /**
  192. * Event will be fired when user double tap on Swiper's container. Receives `pointerup` event as an arguments
  193. */
  194. doubletap: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;
  195. /**
  196. * Event will be fired when Swiper progress is changed, as an arguments it receives progress that is always from 0 to 1
  197. */
  198. progress: CustomEvent<[swiper: Swiper, progress: number]>;
  199. /**
  200. * Event will be fired when Swiper reach its beginning (initial position)
  201. */
  202. reachbeginning: CustomEvent<[swiper: Swiper]>;
  203. /**
  204. * Event will be fired when Swiper reach last slide
  205. */
  206. reachend: CustomEvent<[swiper: Swiper]>;
  207. /**
  208. * Event will be fired when Swiper goes to beginning or end position
  209. */
  210. toedge: CustomEvent<[swiper: Swiper]>;
  211. /**
  212. * Event will be fired when Swiper goes from beginning or end position
  213. */
  214. fromedge: CustomEvent<[swiper: Swiper]>;
  215. /**
  216. * Event will be fired when swiper's wrapper change its position. Receives current translate value as an arguments
  217. */
  218. settranslate: CustomEvent<[swiper: Swiper, translate: number]>;
  219. /**
  220. * Event will be fired everytime when swiper starts animation. Receives current transition duration (in ms) as an arguments
  221. */
  222. settransition: CustomEvent<[swiper: Swiper, transition: number]>;
  223. /**
  224. * Event will be fired on window resize right before swiper's onresize manipulation
  225. */
  226. resize: CustomEvent<[swiper: Swiper]>;
  227. /**
  228. * Event will be fired if observer is enabled and it detects DOM mutations
  229. */
  230. observerupdate: CustomEvent<[swiper: Swiper]>;
  231. /**
  232. * Event will be fired right before "loop fix"
  233. */
  234. beforeloopfix: CustomEvent<[swiper: Swiper]>;
  235. /**
  236. * Event will be fired after "loop fix"
  237. */
  238. loopfix: CustomEvent<[swiper: Swiper]>;
  239. /**
  240. * Event will be fired on breakpoint change
  241. */
  242. breakpoint: CustomEvent<[swiper: Swiper, breakpointParams: SwiperOptions]>;
  243. /**
  244. * !INTERNAL: Event will fired right before breakpoint change
  245. */
  246. /**
  247. * !INTERNAL: Event will fired after setting CSS classes on swiper container element
  248. */
  249. /**
  250. * !INTERNAL: Event will fired after setting CSS classes on swiper slide element
  251. */
  252. /**
  253. * !INTERNAL: Event will fired after setting CSS classes on all swiper slides
  254. */
  255. /**
  256. * !INTERNAL: Event will fired as soon as swiper instance available (before init)
  257. */
  258. /**
  259. * !INTERNAL: Event will be fired on free mode touch end (release) and there will no be momentum
  260. */
  261. /**
  262. * Event will fired on active index change
  263. */
  264. activeindexchange: CustomEvent<[swiper: Swiper]>;
  265. /**
  266. * Event will fired on snap index change
  267. */
  268. snapindexchange: CustomEvent<[swiper: Swiper]>;
  269. /**
  270. * Event will fired on real index change
  271. */
  272. realindexchange: CustomEvent<[swiper: Swiper]>;
  273. /**
  274. * Event will fired right after initialization
  275. */
  276. afterinit: CustomEvent<[swiper: Swiper]>;
  277. /**
  278. * Event will fired right before initialization
  279. */
  280. beforeinit: CustomEvent<[swiper: Swiper]>;
  281. /**
  282. * Event will fired before resize handler
  283. */
  284. beforeresize: CustomEvent<[swiper: Swiper]>;
  285. /**
  286. * Event will fired before slide change transition start
  287. */
  288. beforeslidechangestart: CustomEvent<[swiper: Swiper]>;
  289. /**
  290. * Event will fired before transition start
  291. */
  292. beforetransitionstart: CustomEvent<[swiper: Swiper, speed: number, internal: any]>; // what is internal?
  293. /**
  294. * Event will fired on direction change
  295. */
  296. changedirection: CustomEvent<[swiper: Swiper]>;
  297. /**
  298. * Event will be fired when user double click/tap on Swiper
  299. */
  300. doubleclick: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;
  301. /**
  302. * Event will be fired on swiper destroy
  303. */
  304. destroy: CustomEvent<[swiper: Swiper]>;
  305. /**
  306. * Event will be fired on momentum bounce
  307. */
  308. momentumbounce: CustomEvent<[swiper: Swiper]>;
  309. /**
  310. * Event will be fired on orientation change (e.g. landscape -> portrait)
  311. */
  312. orientationchange: CustomEvent<[swiper: Swiper]>;
  313. /**
  314. * Event will be fired in the beginning of animation of resetting slide to current one
  315. */
  316. slideresettransitionstart: CustomEvent<[swiper: Swiper]>;
  317. /**
  318. * Event will be fired in the end of animation of resetting slide to current one
  319. */
  320. slideresettransitionend: CustomEvent<[swiper: Swiper]>;
  321. /**
  322. * Event will be fired with first touch/drag move
  323. */
  324. sliderfirstmove: CustomEvent<[swiper: Swiper, event: TouchEvent]>;
  325. /**
  326. * Event will be fired when number of slides has changed
  327. */
  328. slideslengthchange: CustomEvent<[swiper: Swiper]>;
  329. /**
  330. * Event will be fired when slides grid has changed
  331. */
  332. slidesgridlengthchange: CustomEvent<[swiper: Swiper]>;
  333. /**
  334. * Event will be fired when snap grid has changed
  335. */
  336. snapgridlengthchange: CustomEvent<[swiper: Swiper]>;
  337. /**
  338. * Event will be fired after swiper.update() call
  339. */
  340. update: CustomEvent<[swiper: Swiper]>;
  341. /**
  342. * Event will be fired when swiper is locked (when `watchOverflow` enabled)
  343. */
  344. lock: CustomEvent<[swiper: Swiper]>;
  345. /**
  346. * Event will be fired when swiper is unlocked (when `watchOverflow` enabled)
  347. */
  348. unlock: CustomEvent<[swiper: Swiper]>;
  349. }
  350. interface SwiperContainer extends HTMLElement {}
  351. interface SwiperContainer extends SwiperOptions {
  352. swiper: Swiper;
  353. initialize: () => void;
  354. injectStyles: string[];
  355. injectStylesUrls: string[];
  356. eventsPrefix: string;
  357. addEventListener<K extends keyof SwiperContainerEventMap>(
  358. type: K,
  359. listener: (this: SwiperContainer, ev: SwiperContainerEventMap[K]) => any,
  360. options?: boolean | AddEventListenerOptions,
  361. ): void;
  362. addEventListener(
  363. type: string,
  364. listener: EventListenerOrEventListenerObject,
  365. options?: boolean | AddEventListenerOptions,
  366. ): void;
  367. removeEventListener<K extends keyof SwiperContainerEventMap>(
  368. type: K,
  369. listener: (this: SwiperContainer, ev: SwiperContainerEventMap[K]) => any,
  370. options?: boolean | EventListenerOptions,
  371. ): void;
  372. removeEventListener(
  373. type: string,
  374. listener: EventListenerOrEventListenerObject,
  375. options?: boolean | EventListenerOptions,
  376. ): void;
  377. }
  378. interface SwiperSlide extends HTMLElement {
  379. lazy: string | boolean;
  380. }
  381. declare global {
  382. interface HTMLElementTagNameMap {
  383. 'swiper-container': SwiperContainer;
  384. 'swiper-slide': SwiperSlide;
  385. }
  386. }
  387. export { SwiperContainer, SwiperSlide, register };