swiper-class.d.ts 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
  1. import { Dom7Array } from 'dom7';
  2. import { SwiperOptions } from './swiper-options';
  3. import { CSSSelector, SwiperModule } from './shared';
  4. import { SwiperEvents } from './swiper-events';
  5. import { A11yMethods } from './modules/a11y';
  6. import { AutoplayMethods } from './modules/autoplay';
  7. import { ControllerMethods } from './modules/controller';
  8. import { CoverflowEffectMethods } from './modules/effect-coverflow';
  9. import { CubeEffectMethods } from './modules/effect-cube';
  10. import { FadeEffectMethods } from './modules/effect-fade';
  11. import { FlipEffectMethods } from './modules/effect-flip';
  12. import { CreativeEffectMethods } from './modules/effect-creative';
  13. import { CardsEffectMethods } from './modules/effect-cards';
  14. import { HashNavigationMethods } from './modules/hash-navigation';
  15. import { HistoryMethods } from './modules/history';
  16. import { KeyboardMethods } from './modules/keyboard';
  17. import { LazyMethods } from './modules/lazy';
  18. import { MousewheelMethods } from './modules/mousewheel';
  19. import { NavigationMethods } from './modules/navigation';
  20. import { PaginationMethods } from './modules/pagination';
  21. import { ParallaxMethods } from './modules/parallax';
  22. import { ScrollbarMethods } from './modules/scrollbar';
  23. import { ThumbsMethods } from './modules/thumbs';
  24. import { VirtualMethods } from './modules/virtual';
  25. import { ZoomMethods } from './modules/zoom';
  26. import { FreeModeMethods } from './modules/free-mode';
  27. import { ManipulationMethods } from './modules/manipulation';
  28. interface SwiperClass<Events> {
  29. /** Add event handler */
  30. on<E extends keyof Events>(event: E, handler: Events[E]): void;
  31. /** Add event handler that will be removed after it was fired */
  32. once<E extends keyof Events>(event: E, handler: Events[E]): void;
  33. /** Remove event handler */
  34. off<E extends keyof Events>(event: E, handler: Events[E]): void;
  35. /** Remove all handlers for specified event */
  36. off<E extends keyof Events>(event: E): void;
  37. /** Fire event on instance */
  38. emit<E extends keyof Events>(event: E, ...args: any[]): void;
  39. }
  40. interface Swiper extends SwiperClass<SwiperEvents> {
  41. /**
  42. * Object with passed initialization parameters
  43. */
  44. params: SwiperOptions;
  45. /**
  46. * Object with original initialization parameters
  47. */
  48. originalParams: SwiperOptions;
  49. /**
  50. * Dom7 element with slider container HTML element. To get vanilla HTMLElement use `swiper.el`
  51. */
  52. $el: Dom7Array;
  53. /**
  54. * Slider container HTML element
  55. */
  56. el: HTMLElement;
  57. /**
  58. * Dom7 element with slider wrapper HTML element. To get vanilla HTMLElement use `swiper.wrapperEl`
  59. */
  60. $wrapperEl: Dom7Array;
  61. /**
  62. * Wrapper HTML element
  63. */
  64. wrapperEl: HTMLElement;
  65. /**
  66. * Dom7 array-like collection of slides HTML elements. To get specific slide HTMLElement use `swiper.slides[1]`
  67. */
  68. slides: Dom7Array;
  69. /**
  70. * !INTERNAL
  71. */
  72. loopedSlides: number | null;
  73. /**
  74. * Width of container
  75. */
  76. width: number;
  77. /**
  78. * Height of container
  79. */
  80. height: number;
  81. /**
  82. * Current value of wrapper translate
  83. */
  84. translate: number;
  85. /**
  86. * Current progress of wrapper translate (from 0 to 1)
  87. */
  88. progress: number;
  89. /**
  90. * Index number of currently active slide
  91. *
  92. * @note Note, that in loop mode active index value will be always shifted on a number of looped/duplicated slides
  93. */
  94. activeIndex: number;
  95. /**
  96. * Index number of currently active slide considering duplicated slides in loop mode
  97. */
  98. realIndex: number;
  99. /**
  100. * Index number of previously active slide
  101. */
  102. previousIndex: number;
  103. /**
  104. * `true` if slider on most "left"/"top" position
  105. */
  106. isBeginning: boolean;
  107. /**
  108. * `true` if slider on most "right"/"bottom" position
  109. */
  110. isEnd: boolean;
  111. /**
  112. * `true` if swiper is in transition
  113. */
  114. animating: boolean;
  115. /**
  116. * Object with the following touch event properties:
  117. *
  118. * - `swiper.touches.startX`
  119. * - `swiper.touches.startY`
  120. * - `swiper.touches.currentX`
  121. * - `swiper.touches.currentY`
  122. * - `swiper.touches.diff`
  123. */
  124. touches: {
  125. startX: number;
  126. startY: number;
  127. currentX: number;
  128. currentY: number;
  129. diff: number;
  130. };
  131. /**
  132. * Index number of last clicked slide
  133. */
  134. clickedIndex: number;
  135. /**
  136. * Link to last clicked slide (HTMLElement)
  137. */
  138. clickedSlide: HTMLElement;
  139. /**
  140. * Disable / enable ability to slide to the next slides by assigning `false` / `true` to this property
  141. */
  142. allowSlideNext: boolean;
  143. /**
  144. * Disable / enable ability to slide to the previous slides by assigning `false` / `true` to this property
  145. */
  146. allowSlidePrev: boolean;
  147. /**
  148. * Disable / enable ability move slider by grabbing it with mouse or by touching it with finger (on touch screens) by assigning `false` / `true` to this property
  149. */
  150. allowTouchMove: boolean;
  151. /**
  152. * !INTERNAL
  153. */
  154. rtlTranslate: boolean;
  155. /**
  156. * Disable Swiper (if it was enabled). When Swiper is disabled, it will hide all navigation elements and won't respond to any events and interactions
  157. *
  158. */
  159. disable(): void;
  160. /**
  161. * Enable Swiper (if it was disabled)
  162. *
  163. */
  164. enable(): void;
  165. /**
  166. * Set Swiper translate progress (from 0 to 1). Where 0 - its initial position (offset) on first slide, and 1 - its maximum position (offset) on last slide
  167. *
  168. * @param progress Swiper translate progress (from 0 to 1).
  169. * @param speed Transition duration (in ms).
  170. */
  171. setProgress(progress: number, speed?: number): void;
  172. /**
  173. * Run transition to next slide.
  174. *
  175. * @param speed Transition duration (in ms).
  176. * @param runCallbacks Set it to false (by default it is true) and transition will
  177. * not produce transition events.
  178. */
  179. slideNext(speed?: number, runCallbacks?: boolean): void;
  180. /**
  181. * Run transition to previous slide.
  182. *
  183. * @param speed Transition duration (in ms).
  184. * @param runCallbacks Set it to false (by default it is true) and transition will
  185. * not produce transition events.
  186. */
  187. slidePrev(speed?: number, runCallbacks?: boolean): void;
  188. /**
  189. * Run transition to the slide with index number equal to 'index' parameter for the
  190. * duration equal to 'speed' parameter.
  191. *
  192. * @param index Index number of slide.
  193. * @param speed Transition duration (in ms).
  194. * @param runCallbacks Set it to false (by default it is true) and transition will
  195. * not produce transition events.
  196. */
  197. slideTo(index: number, speed?: number, runCallbacks?: boolean): void;
  198. /**
  199. * Does the same as .slideTo but for the case when used with enabled loop. So this
  200. * method will slide to slides with realIndex matching to passed index
  201. *
  202. * @param index Index number of slide.
  203. * @param speed Transition duration (in ms).
  204. * @param runCallbacks Set it to false (by default it is true) and transition will
  205. * not produce transition events.
  206. */
  207. slideToLoop(index: number, speed?: number, runCallbacks?: boolean): void;
  208. /**
  209. * Reset swiper position to currently active slide for the duration equal to 'speed'
  210. * parameter.
  211. *
  212. * @param speed Transition duration (in ms).
  213. * @param runCallbacks Set it to false (by default it is true) and transition will
  214. * not produce transition events.
  215. */
  216. slideReset(speed?: number, runCallbacks?: boolean): void;
  217. /**
  218. * Reset swiper position to closest slide/snap point for the duration equal to 'speed' parameter.
  219. *
  220. * @param speed Transition duration (in ms).
  221. * @param runCallbacks Set it to false (by default it is true) and transition will
  222. * not produce transition events.
  223. */
  224. slideToClosest(speed?: number, runCallbacks?: boolean): void;
  225. /**
  226. * Force swiper to update its height (when autoHeight enabled) for the duration equal to
  227. * 'speed' parameter
  228. *
  229. * @param speed Transition duration (in ms).
  230. */
  231. updateAutoHeight(speed?: number): void;
  232. /**
  233. * You should call it after you add/remove slides
  234. * manually, or after you hide/show it, or do any
  235. * custom DOM modifications with Swiper
  236. * This method also includes subcall of the following
  237. * methods which you can use separately:
  238. */
  239. update(): void;
  240. /**
  241. * recalculate size of swiper container
  242. */
  243. updateSize(): void;
  244. /**
  245. * recalculate number of slides and their offsets. Useful after you add/remove slides with JavaScript
  246. */
  247. updateSlides(): void;
  248. /**
  249. * recalculate swiper progress
  250. */
  251. updateProgress(): void;
  252. /**
  253. * update active/prev/next classes on slides and bullets
  254. */
  255. updateSlidesClasses(): void;
  256. /**
  257. * Changes slider direction from horizontal to vertical and back.
  258. *
  259. * @param direction New direction. If not specified, then will automatically changed to opposite direction
  260. * @param needUpdate Will call swiper.update(). Default true
  261. */
  262. changeDirection(direction?: 'horizontal' | 'vertical', needUpdate?: boolean): void;
  263. /**
  264. * Detach all events listeners
  265. */
  266. detachEvents(): void;
  267. /**
  268. * Attach all events listeners again
  269. */
  270. attachEvents(): void;
  271. /**
  272. * !INTERNAL
  273. */
  274. loopCreate(): void;
  275. /**
  276. * !INTERNAL
  277. */
  278. loopDestroy(): void;
  279. /**
  280. * Initialize slider
  281. */
  282. init(el?: HTMLElement): Swiper;
  283. /**
  284. * Destroy slider instance and detach all events listeners
  285. *
  286. * @param deleteInstance Set it to false (by default it is true) to not to delete Swiper instance
  287. * @param cleanStyles Set it to true (by default it is true) and all custom styles will be removed from slides, wrapper and container.
  288. * Useful if you need to destroy Swiper and to init again with new options or in different direction
  289. */
  290. destroy(deleteInstance?: boolean, cleanStyles?: boolean): void;
  291. /**
  292. * Set custom css3 transform's translate value for swiper wrapper
  293. */
  294. setTranslate(translate: any): void;
  295. /**
  296. * Get current value of swiper wrapper css3 transform translate
  297. */
  298. getTranslate(): any;
  299. /**
  300. * Animate custom css3 transform's translate value for swiper wrapper
  301. *
  302. * @param translate Translate value (in px)
  303. * @param speed Transition duration (in ms)
  304. * @param runCallbacks Set it to false (by default it is true) and transition will not produce transition events
  305. * @param translateBounds Set it to false (by default it is true) and transition value can extend beyond min and max translate
  306. *
  307. */
  308. translateTo(
  309. translate: number,
  310. speed: number,
  311. runCallbacks?: boolean,
  312. translateBounds?: boolean,
  313. ): any;
  314. /**
  315. * Unset grab cursor
  316. */
  317. unsetGrabCursor(): void;
  318. /**
  319. * Set grab cursor
  320. */
  321. setGrabCursor(): void;
  322. /**
  323. * Add event listener that will be fired on all events
  324. */
  325. onAny(handler: (eventName: string, ...args: any[]) => void): void;
  326. /**
  327. * Remove event listener that will be fired on all events
  328. */
  329. offAny(handler: (eventName: string, ...args: any[]) => void): void;
  330. /**
  331. * !INTERNAL
  332. */
  333. isHorizontal(): boolean;
  334. /**
  335. * !INTERNAL
  336. */
  337. getBreakpoint(breakpoints: SwiperOptions['breakpoints']): string;
  338. /**
  339. * !INTERNAL
  340. */
  341. setBreakpoint(): void;
  342. /**
  343. * !INTERNAL
  344. */
  345. currentBreakpoint: any;
  346. /**
  347. * !INTERNAL
  348. */
  349. destroyed: boolean;
  350. /**
  351. * !INTERNAL
  352. */
  353. modules: Array<SwiperModule>;
  354. a11y: A11yMethods;
  355. autoplay: AutoplayMethods;
  356. controller: ControllerMethods;
  357. coverflowEffect: CoverflowEffectMethods;
  358. cubeEffect: CubeEffectMethods;
  359. fadeEffect: FadeEffectMethods;
  360. flipEffect: FlipEffectMethods;
  361. creativeEffect: CreativeEffectMethods;
  362. cardsEffect: CardsEffectMethods;
  363. hashNavigation: HashNavigationMethods;
  364. history: HistoryMethods;
  365. keyboard: KeyboardMethods;
  366. lazy: LazyMethods;
  367. mousewheel: MousewheelMethods;
  368. navigation: NavigationMethods;
  369. pagination: PaginationMethods;
  370. parallax: ParallaxMethods;
  371. scrollbar: ScrollbarMethods;
  372. thumbs: ThumbsMethods;
  373. virtual: VirtualMethods;
  374. zoom: ZoomMethods;
  375. freeMode: FreeModeMethods;
  376. }
  377. interface Swiper extends ManipulationMethods {}
  378. declare class Swiper implements Swiper {
  379. /**
  380. * Constructs a new Swiper instance.
  381. *
  382. * @param container Where Swiper applies to.
  383. * @param options Instance options.
  384. */
  385. constructor(container: CSSSelector | HTMLElement, options?: SwiperOptions);
  386. /**
  387. * Installs modules on Swiper in runtime.
  388. */
  389. static use(modules: SwiperModule[]): void;
  390. /**
  391. * Swiper default options
  392. */
  393. static defaults: SwiperOptions;
  394. /**
  395. * Extend global Swiper defaults
  396. */
  397. static extendDefaults(options: SwiperOptions): void;
  398. /**
  399. * Object with global Swiper extended options
  400. */
  401. static extendedDefaults: SwiperOptions;
  402. }
  403. export default Swiper;