swiper-element.d.ts 13 KB

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