UNPKG

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