UNPKG

16.4 kBTypeScriptView Raw
1import { A11yOptions } from './components/a11y';
2import { AutoplayOptions } from './components/autoplay';
3import { ControllerOptions } from './components/controller';
4import { CoverflowEffectOptions } from './components/effect-coverflow';
5import { CubeEffectOptions } from './components/effect-cube';
6import { FadeEffectOptions } from './components/effect-fade';
7import { FlipEffectOptions } from './components/effect-flip';
8import { HashNavigationOptions } from './components/hash-navigation';
9import { HistoryOptions } from './components/history';
10import { KeyboardOptions } from './components/keyboard';
11import { LazyOptions } from './components/lazy';
12import { MousewheelOptions } from './components/mousewheel';
13import { NavigationOptions } from './components/navigation';
14import { PaginationOptions } from './components/pagination';
15import { ScrollbarOptions } from './components/scrollbar';
16import { ThumbsOptions } from './components/thumbs';
17import { VirtualOptions } from './components/virtual';
18import { ZoomOptions } from './components/zoom';
19
20import { CSSSelector } from './shared';
21import { SwiperEvents } from './swiper-events';
22
23export 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}