1 | import { A11yOptions } from './components/a11y';
|
2 | import { AutoplayOptions } from './components/autoplay';
|
3 | import { ControllerOptions } from './components/controller';
|
4 | import { CoverflowEffectOptions } from './components/effect-coverflow';
|
5 | import { CubeEffectOptions } from './components/effect-cube';
|
6 | import { FadeEffectOptions } from './components/effect-fade';
|
7 | import { FlipEffectOptions } from './components/effect-flip';
|
8 | import { HashNavigationOptions } from './components/hash-navigation';
|
9 | import { HistoryOptions } from './components/history';
|
10 | import { KeyboardOptions } from './components/keyboard';
|
11 | import { LazyOptions } from './components/lazy';
|
12 | import { MousewheelOptions } from './components/mousewheel';
|
13 | import { NavigationOptions } from './components/navigation';
|
14 | import { PaginationOptions } from './components/pagination';
|
15 | import { ScrollbarOptions } from './components/scrollbar';
|
16 | import { ThumbsOptions } from './components/thumbs';
|
17 | import { VirtualOptions } from './components/virtual';
|
18 | import { ZoomOptions } from './components/zoom';
|
19 |
|
20 | import { CSSSelector } from './shared';
|
21 | import { SwiperEvents } from './swiper-events';
|
22 |
|
23 | export interface SwiperOptions {
|
24 | /**
|
25 | * Whether Swiper should be initialised automatically when you create an instance.
|
26 | * If disabled, then you need to init it manually by calling mySwiper.init()
|
27 | *
|
28 | * @default true
|
29 | */
|
30 | init?: boolean;
|
31 |
|
32 | /**
|
33 | * Swiper will recalculate slides position on window resize (orientationchange)
|
34 | *
|
35 | * @default true
|
36 | */
|
37 | updateOnWindowResize?: boolean;
|
38 |
|
39 | /**
|
40 | * Index number of initial slide.
|
41 | *
|
42 | * @default 0
|
43 | */
|
44 | initialSlide?: number;
|
45 |
|
46 | /**
|
47 | * Could be 'horizontal' or 'vertical' (for vertical slider).
|
48 | *
|
49 | * @default 'horizontal'
|
50 | */
|
51 | direction?: 'horizontal' | 'vertical';
|
52 |
|
53 | /**
|
54 | * Duration of transition between slides (in ms)
|
55 | *
|
56 | * @default 300
|
57 | */
|
58 | speed?: number;
|
59 |
|
60 | /**
|
61 | * Enabled this option and plugin will set width/height on swiper wrapper equal to total size of all slides.
|
62 | * Mostly should be used as compatibility fallback option for browser that don't support flexbox layout well
|
63 | */
|
64 | setWrapperSize?: boolean;
|
65 |
|
66 | /**
|
67 | * Enabled this option and swiper will be operated as usual except it will not move, real translate values on wrapper will not be set.
|
68 | * Useful when you may need to create custom slide transition
|
69 | */
|
70 | virtualTranslate?: boolean;
|
71 |
|
72 | /**
|
73 | * Swiper width (in px). Parameter allows to force Swiper width.
|
74 | * Useful only if you initialize Swiper when it is hidden and in SSR and Test environments for correct Swiper initialization
|
75 | *
|
76 | * @note Setting this parameter will make Swiper not responsive
|
77 | * @default null
|
78 | */
|
79 | width?: number;
|
80 |
|
81 | /**
|
82 | * Swiper height (in px). Parameter allows to force Swiper height.
|
83 | * Useful only if you initialize Swiper when it is hidden and in SSR and Test environments for correct Swiper initialization
|
84 | *
|
85 | * @note Setting this parameter will make Swiper not responsive
|
86 | * @default null
|
87 | */
|
88 | height?: number;
|
89 |
|
90 | /**
|
91 | * Set to true and slider wrapper will adopt its height to the height of the currently active slide
|
92 | *
|
93 | * @default false
|
94 | */
|
95 | autoHeight?: boolean;
|
96 |
|
97 | /**
|
98 | * Set to true to round values of slides width and height to prevent blurry texts on usual
|
99 | * resolution screens (if you have such)
|
100 | *
|
101 | * @default false
|
102 | */
|
103 | roundLengths?: boolean;
|
104 |
|
105 | /**
|
106 | * Set to true on Swiper for correct touch events interception. Use only on
|
107 | * swipers that use same direction as the parent one
|
108 | *
|
109 | * @default false
|
110 | */
|
111 | nested?: boolean;
|
112 |
|
113 | /**
|
114 | * If enabled (by default) and navigation elements' parameters passed as a string (like ".pagination")
|
115 | * then Swiper will look for such elements through child elements first.
|
116 | * Applies for pagination, prev/next buttons and scrollbar elements
|
117 | *
|
118 | * @default true
|
119 | */
|
120 | uniqueNavElements?: boolean;
|
121 |
|
122 | /**
|
123 | * Tranisition effect. Could be "slide", "fade", "cube", "coverflow" or "flip"
|
124 | *
|
125 | * @default 'slide'
|
126 | */
|
127 | effect?: 'slide' | 'fade' | 'cube' | 'coverflow' | 'flip';
|
128 |
|
129 | /**
|
130 | * Fire [Transition/SlideChange][Start/End] events on swiper initialization.
|
131 | * Such events will be fired on initialization in case of your initialSlide is not 0, or you use loop mode
|
132 | *
|
133 | * @default true
|
134 | */
|
135 | runCallbacksOnInit?: boolean;
|
136 |
|
137 | /**
|
138 | * When enabled Swiper will be disabled and hide navigation buttons on
|
139 | * case there are not enough slides for sliding.
|
140 | *
|
141 | * @default false
|
142 | */
|
143 | watchOverflow?: boolean;
|
144 |
|
145 | /**
|
146 | * Register event handlers.
|
147 | */
|
148 | on?: {
|
149 | [event in keyof SwiperEvents]?: SwiperEvents[event];
|
150 | };
|
151 |
|
152 | // CSS Scroll Snap
|
153 |
|
154 | /**
|
155 | * When enabled it will use modern CSS Scroll Snap API.
|
156 | * It doesn't support all of Swiper's features, but potentially should bring a much better performance in simple configurations.
|
157 | *
|
158 | * @default false
|
159 | */
|
160 | cssMode?: boolean;
|
161 |
|
162 | // Slides grid
|
163 |
|
164 | /**
|
165 | * Distance between slides in px.
|
166 | */
|
167 | spaceBetween?: number;
|
168 |
|
169 | /**
|
170 | * Number of slides per view (slides visible at the same time on slider's container).
|
171 | * If you use it with "auto" value and along with loop: true then you need to specify loopedSlides parameter with amount of slides to loop (duplicate)
|
172 | * slidesPerView: 'auto' is currently not compatible with multirow mode, when slidesPerColumn > 1
|
173 | */
|
174 | slidesPerView?: number | 'auto';
|
175 |
|
176 | /**
|
177 | * Number of slides per column, for multirow layout
|
178 | * slidesPerColumn > 1 is currently not compatible with loop mode (loop: true)
|
179 | */
|
180 | slidesPerColumn?: number;
|
181 |
|
182 | /**
|
183 | * Could be 'column' or 'row'. Defines how slides should fill rows, by column or by row
|
184 | */
|
185 | slidesPerColumnFill?: 'row' | 'column';
|
186 |
|
187 | /**
|
188 | * Set numbers of slides to define and enable group sliding. Useful to use with slidesPerView > 1
|
189 | */
|
190 | slidesPerGroup?: number;
|
191 |
|
192 | /**
|
193 | * The parameter works in the following way: If slidesPerGroupSkip equals 0 (default), no slides are excluded from grouping, and the resulting behaviour is the same as without this change.
|
194 | * If slidesPerGroupSkip is equal or greater than 1 the first X slides are treated as single groups, whereas all following slides are grouped by the slidesPerGroup value.
|
195 | *
|
196 | * @default 0
|
197 | */
|
198 | slidesPerGroupSkip?: number;
|
199 |
|
200 | /**
|
201 | * If true, then active slide will be centered, not always on the left side.
|
202 | */
|
203 | centeredSlides?: boolean;
|
204 |
|
205 | /**
|
206 | * If true, then active slide will be centered without adding gaps at the beginning and end of slider.
|
207 | * Required centeredSlides: true. Not intended to be used with loop or pagination
|
208 | *
|
209 | * @default false
|
210 | */
|
211 | centeredSlidesBounds?: boolean;
|
212 |
|
213 | /**
|
214 | * Add (in px) additional slide offset in the beginning of the container (before all slides)
|
215 | */
|
216 | slidesOffsetBefore?: number;
|
217 |
|
218 | /**
|
219 | * Add (in px) additional slide offset in the end of the container (after all slides)
|
220 | */
|
221 | slidesOffsetAfter?: number;
|
222 |
|
223 | /**
|
224 | * Normalize slide index.
|
225 | */
|
226 | normalizeSlideIndex?: boolean;
|
227 |
|
228 | /**
|
229 | * When enabled it center slides if the amount of slides less than `slidesPerView`. Not intended to be used loop mode and slidesPerColumn
|
230 | */
|
231 | centerInsufficientSlides?: boolean;
|
232 |
|
233 | // Grab Cursor
|
234 | grabCursor?: boolean;
|
235 |
|
236 | // Touches
|
237 |
|
238 | /**
|
239 | * Target element to listen touch events on. Can be 'container' (to listen for touch events on swiper-container) or 'wrapper'
|
240 | * (to listen for touch events on swiper-wrapper)
|
241 | */
|
242 | touchEventsTarget?: 'container' | 'wrapper';
|
243 |
|
244 | /**
|
245 | * Touch ratio
|
246 | */
|
247 | touchRatio?: number;
|
248 |
|
249 | /**
|
250 | * Allowable angle (in degrees) to trigger touch move
|
251 | */
|
252 | touchAngle?: number;
|
253 |
|
254 | /**
|
255 | * If true, Swiper will accept mouse events like touch events (click and drag to change slides)
|
256 | */
|
257 | simulateTouch?: boolean;
|
258 |
|
259 | /**
|
260 | * Set to false if you want to disable short swipes
|
261 | */
|
262 | shortSwipes?: boolean;
|
263 |
|
264 | /**
|
265 | * Set to false if you want to disable long swipes
|
266 | */
|
267 | longSwipes?: boolean;
|
268 |
|
269 | /**
|
270 | * Ratio to trigger swipe to next/previous slide during long swipes
|
271 | */
|
272 | longSwipesRatio?: number;
|
273 |
|
274 | /**
|
275 | * Minimal duration (in ms) to trigger swipe to next/previous slide during long swipes
|
276 | */
|
277 | longSwipesMs?: number;
|
278 |
|
279 | /**
|
280 | * If disabled, then slider will be animated only when you release it, it will not move while you hold your finger on it
|
281 | */
|
282 | followFinger?: boolean;
|
283 |
|
284 | /**
|
285 | * If false, then the only way to switch the slide is use of external API functions like slidePrev or slideNext
|
286 | */
|
287 | allowTouchMove?: boolean;
|
288 |
|
289 | /**
|
290 | * Threshold value in px. If "touch distance" will be lower than this value then swiper will not move
|
291 | */
|
292 | threshold?: number;
|
293 |
|
294 | /**
|
295 | * If disabled, `touchstart` (`mousedown`) event won't be prevented
|
296 | */
|
297 | touchStartPreventDefault?: boolean;
|
298 |
|
299 | /**
|
300 | * Force to always prevent default for `touchstart` (`mousedown`) event
|
301 | */
|
302 | touchStartForcePreventDefault?: boolean;
|
303 |
|
304 | /**
|
305 | * If enabled, then propagation of "touchmove" will be stopped
|
306 | */
|
307 | touchMoveStopPropagation?: boolean;
|
308 |
|
309 | /**
|
310 | * Enable to release Swiper events for swipe-to-go-back work in iOS UIWebView
|
311 | */
|
312 | iOSEdgeSwipeDetection?: boolean;
|
313 |
|
314 | /**
|
315 | * Area (in px) from left edge of the screen to release touch events for swipe-to-go-back in iOS UIWebView
|
316 | */
|
317 | iOSEdgeSwipeThreshold?: number;
|
318 |
|
319 | /**
|
320 | * Enable to release touch events on slider edge position (beginning, end) to allow for further page scrolling
|
321 | */
|
322 | touchReleaseOnEdges?: boolean;
|
323 |
|
324 | /**
|
325 | * Passive event listeners will be used by default where possible to improve scrolling performance on mobile devices.
|
326 | * But if you need to use `e.preventDefault` and you have conflict with it, then you should disable this parameter
|
327 | */
|
328 | passiveListeners?: boolean;
|
329 |
|
330 | // Touch Resistance
|
331 |
|
332 | /**
|
333 | * Set to false if you want to disable resistant bounds
|
334 | */
|
335 | resistance?: boolean;
|
336 |
|
337 | /**
|
338 | * This option allows you to control resistance ratio
|
339 | */
|
340 | resistanceRatio?: number;
|
341 |
|
342 | // Swiping / No swiping
|
343 | /**
|
344 | * When enabled it won't allow to change slides by swiping or navigation/pagination buttons during transition
|
345 | *
|
346 | * @default false
|
347 | */
|
348 | preventInteractionOnTransition?: boolean;
|
349 |
|
350 | /**
|
351 | * Set to false to disable swiping to previous slide direction (to left or top)
|
352 | *
|
353 | * @default true
|
354 | */
|
355 | allowSlidePrev?: boolean;
|
356 |
|
357 | /**
|
358 | * Set to false to disable swiping to next slide direction (to right or bottom)
|
359 | *
|
360 | * @default true
|
361 | */
|
362 | allowSlideNext?: boolean;
|
363 |
|
364 | /**
|
365 | * Enable/disable swiping on elements matched to class specified in noSwipingClass
|
366 | *
|
367 | * @default true
|
368 | */
|
369 | noSwiping?: boolean;
|
370 |
|
371 | /**
|
372 | * Specify noSwiping's' element css class
|
373 | *
|
374 | * @default 'swiper-no-swiping'
|
375 | */
|
376 | noSwipingClass?: string;
|
377 |
|
378 | /**
|
379 | * Can be used instead of noSwipingClass to specify elements to disable swiping on.
|
380 | * For example 'input' will disable swiping on all inputs
|
381 | *
|
382 | * @default
|
383 | */
|
384 | noSwipingSelector?: string;
|
385 |
|
386 | /**
|
387 | * String with CSS selector or HTML element of the container with pagination that will work as only available handler for swiping
|
388 | *
|
389 | * @default null
|
390 | */
|
391 | swipeHandler?: CSSSelector | HTMLElement;
|
392 |
|
393 | // Clicks
|
394 | /**
|
395 | * Set to true to prevent accidental unwanted clicks on links during swiping
|
396 | *
|
397 | * @default true
|
398 | */
|
399 | preventClicks?: boolean;
|
400 |
|
401 | /**
|
402 | * Set to true to stop clicks event propagation on links during swiping
|
403 | *
|
404 | * @default true
|
405 | */
|
406 | preventClicksPropagation?: boolean;
|
407 |
|
408 | /**
|
409 | * Set to true and click on any slide will produce transition to this slide
|
410 | *
|
411 | * @default false
|
412 | */
|
413 | slideToClickedSlide?: boolean;
|
414 |
|
415 | // Freemode
|
416 |
|
417 | /**
|
418 | * If enabled then slides will not have fixed positions
|
419 | *
|
420 | * @default false
|
421 | */
|
422 | freeMode?: boolean;
|
423 |
|
424 | /**
|
425 | * If enabled, then slide will keep moving for a while after you release it
|
426 | *
|
427 | * @default true
|
428 | */
|
429 | freeModeMomentum?: boolean;
|
430 |
|
431 | /**
|
432 | * Higher value produces larger momentum distance after you release slider
|
433 | *
|
434 | * @default 1
|
435 | */
|
436 | freeModeMomentumRatio?: number;
|
437 |
|
438 | /**
|
439 | * Higher value produces larger momentum velocity after you release slider
|
440 | *
|
441 | * @default 1
|
442 | */
|
443 | freeModeMomentumVelocityRatio?: number;
|
444 |
|
445 | /**
|
446 | * Set to false if you want to disable momentum bounce in free mode
|
447 | *
|
448 | * @default true
|
449 | */
|
450 | freeModeMomentumBounce?: boolean;
|
451 |
|
452 | /**
|
453 | * Higher value produces larger momentum bounce effect
|
454 | *
|
455 | * @default 1
|
456 | */
|
457 | freeModeMomentumBounceRatio?: number;
|
458 |
|
459 | /**
|
460 | * Minimum touchmove-velocity required to trigger free mode momentum
|
461 | *
|
462 | * @default 0.02
|
463 | */
|
464 | freeModeMinimumVelocity?: number;
|
465 |
|
466 | /**
|
467 | * Set to enabled to enable snap to slides positions in free mode
|
468 | *
|
469 | * @default false
|
470 | */
|
471 | freeModeSticky?: boolean;
|
472 |
|
473 | // Progress
|
474 | /**
|
475 | * Enable this feature to calculate each slides progress
|
476 | *
|
477 | * @default false
|
478 | */
|
479 | watchSlidesProgress?: boolean;
|
480 |
|
481 | /**
|
482 | * watchSlidesProgress should be enabled. Enable this option and slides that are in viewport will have additional visible class
|
483 | *
|
484 | * @default false
|
485 | */
|
486 | watchSlidesVisibility?: boolean;
|
487 |
|
488 | // Images
|
489 | /**
|
490 | * When enabled Swiper will force to load all images
|
491 | *
|
492 | * @default true
|
493 | */
|
494 | preloadImages?: boolean;
|
495 |
|
496 | /**
|
497 | * When enabled Swiper will be reinitialized after all inner images (<img> tags) are loaded. Required preloadImages: true
|
498 | *
|
499 | * @default true
|
500 | */
|
501 | updateOnImagesReady?: boolean;
|
502 |
|
503 | // Loop
|
504 | /**
|
505 | * Enables continuous loop mode
|
506 | *
|
507 | * @default false
|
508 | */
|
509 | loop?: boolean;
|
510 |
|
511 | /**
|
512 | * Addition number of slides that will be cloned after creating of loop
|
513 | *
|
514 | * @default 0
|
515 | */
|
516 | loopAdditionalSlides?: number;
|
517 |
|
518 | /**
|
519 | * If you use slidesPerView:'auto' with loop mode you should tell to Swiper how many slides it should loop (duplicate) using this parameter
|
520 | *
|
521 | * @default null
|
522 | */
|
523 | loopedSlides?: number;
|
524 |
|
525 | /**
|
526 | * Enable and loop mode will fill groups with insufficient number of slides with blank slides. Good to be used with slidesPerGroup parameter
|
527 | *
|
528 | * @default false
|
529 | */
|
530 | loopFillGroupWithBlank?: boolean;
|
531 | /**
|
532 | * When enabled it prevents Swiper slide prev/next transitions when transitions is already in progress (has efect when `loop` enabled)
|
533 | *
|
534 | * @default true
|
535 | */
|
536 | loopPreventsSlide?: boolean;
|
537 |
|
538 | // Breakpoints
|
539 | breakpoints?: {
|
540 | [width: number]: SwiperOptions;
|
541 | [ratio: string]: SwiperOptions;
|
542 | };
|
543 |
|
544 | // Observer
|
545 | /**
|
546 | * Set to true to enable Mutation Observer on Swiper and its elements. In this case Swiper will be updated (reinitialized) each time if you change its style (like hide/show) or modify its child elements (like adding/removing slides)
|
547 | *
|
548 | * @default false
|
549 | */
|
550 | observer?: boolean;
|
551 | /**
|
552 | * Set to true if you also need to watch Mutations for Swiper slide children elements
|
553 | *
|
554 | * @default false
|
555 | */
|
556 | observeSlideChildren?: boolean;
|
557 | /**
|
558 | * Set to true if you also need to watch Mutations for Swiper parent elements
|
559 | *
|
560 | * @default false
|
561 | */
|
562 | observeParents?: boolean;
|
563 |
|
564 | // Namespace
|
565 | containerModifierClass?: string;
|
566 | slideClass?: string;
|
567 | slideBlankClass?: string;
|
568 | slideActiveClass?: string;
|
569 | slideDuplicateActiveClass?: string;
|
570 | slideVisibleClass?: string;
|
571 | slideDuplicateClass?: string;
|
572 | slideNextClass?: string;
|
573 | slideDuplicateNextClass?: string;
|
574 | slidePrevClass?: string;
|
575 | slideDuplicatePrevClass?: string;
|
576 | wrapperClass?: string;
|
577 |
|
578 | // ssr
|
579 | /**
|
580 | * userAgent string. Required for browser/device detection when rendered on server-side
|
581 | *
|
582 | * @default null
|
583 | */
|
584 | userAgent?: string;
|
585 | /**
|
586 | * Required for active slide detection when rendered on server-side and enabled history
|
587 | *
|
588 | * @default null
|
589 | */
|
590 | url?: string;
|
591 |
|
592 | a11y?: A11yOptions;
|
593 | autoplay?: AutoplayOptions | boolean;
|
594 | controller?: ControllerOptions;
|
595 | coverflowEffect?: CoverflowEffectOptions;
|
596 | cubeEffect?: CubeEffectOptions;
|
597 | fadeEffect?: FadeEffectOptions;
|
598 | flipEffect?: FlipEffectOptions;
|
599 | hashNavigation?: HashNavigationOptions | boolean;
|
600 | history?: HistoryOptions | boolean;
|
601 | keyboard?: KeyboardOptions | boolean;
|
602 | lazy?: LazyOptions | boolean;
|
603 | mousewheel?: MousewheelOptions | boolean;
|
604 | navigation?: NavigationOptions;
|
605 | pagination?: PaginationOptions;
|
606 | parallax?: boolean;
|
607 | scrollbar?: ScrollbarOptions;
|
608 | thumbs?: ThumbsOptions;
|
609 | virtual?: VirtualOptions | boolean;
|
610 | zoom?: ZoomOptions | boolean;
|
611 | }
|