From 32aed2377c501120b9c778987de47d894b5ec47d Mon Sep 17 00:00:00 2001 From: Luiz Machado Date: Mon, 11 Jun 2018 10:36:05 -0300 Subject: [PATCH] working (w/ Angular 6) example --- types/swiper/v4/index.d.ts | 1688 +++++++++++++++++++----------------- 1 file changed, 871 insertions(+), 817 deletions(-) diff --git a/types/swiper/v4/index.d.ts b/types/swiper/v4/index.d.ts index 687b783b71..ae96702ff6 100644 --- a/types/swiper/v4/index.d.ts +++ b/types/swiper/v4/index.d.ts @@ -1,903 +1,957 @@ -// Type definitions for Swiper v4.1.0 +// Type definitions for Swiper // Project: https://github.com/nolimits4web/Swiper // Definitions by: Sebastián Galiano // Definitions by: Luiz Machado // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.7 -// Swiper Version: 4.1.0 +// TypeScript Version: 2.5 +// Swiper Version: 4.2.6 -type DOM7Element = any; -type SelectableElement = string | HTMLElement; +// declare namespace swiper { +declare module 'swiper' { -/*~ Write your module's methods and properties in this class */ -export declare class Swiper { + type DOM7Element = any; + type SelectableElement = string | HTMLElement; - constructor(container: SelectableElement, options?: SwiperOptions); + /* + * Swiper exports the folloing as ES5 module (in swiper.esm.js). + */ /** - * Object with passed initialization parameters + * Core module */ - params: SwiperOptions; + class Swiper { + + constructor(container: SelectableElement, options?: SwiperOptions); + + /** + * Object with passed initialization parameters + */ + params: SwiperOptions; + + /** + * Element with slider container. + */ + el: HTMLElement; + + /** + * Dom7 element with slider container HTML element. To get vanilla HTMLElement use el + */ + $el: DOM7Element; + + /** + * Slider wrapper HTML element. + */ + wrapperEl: HTMLElement; + + /** + * Dom7 element with slider wrapper HTML element. To get vanilla HTMLElement use wrapperEl + */ + $wrapperEl: DOM7Element; + + /** + * Dom7 array-like collection of slides HTML elements. To get specific slide HTMLElement use slides[1] + */ + slides: DOM7Element[]; + + /** + * Width of container + */ + width; + + /** + * Height of container + */ + height; + + /** + * Current value of wrapper translate + */ + translate; + + /** + * Current progress of wrapper translate (from 0 to 1) + */ + progress; + + /** + * Index number of currently active slide. + * Note, that in loop mode active index value will be always shifted on a number of looped/duplicated slides + */ + activeIndex; + + /** + * Index number of currently active slide considering duplicated slides in loop mode + */ + realIndex; + + /** + * Index number of previously active slide + */ + previousIndex; + + /** + * true if slider on most "left"/"top" position + */ + isBeginning; + + /** + * true if slider on most "right"/"bottom" position + */ + isEnd; + + /** + * true if swiper is in transition + */ + animating; + + /** + * Object with the following touch event properties: + */ + touches: { + startX, + startY, + currentX, + currentY, + diff + }; + + /** + * Index number of last clicked slide + */ + clickedIndex; + + /** + * Link to last clicked slide (HTMLElement) + */ + clickedSlide; + + /** + * Disable/enable ability to slide to the next slides by assigning false/true to this property + */ + allowSlideNext; + + /** + * Disable/enable ability to slide to the previous slides by assigning false/true to this property + */ + allowSlidePrev; + + /** + * 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 + */ + allowTouchMove; + + // Methods + + /** + * Run transition to next slide + * speed - number - transition duration (in ms). Optional + * runCallbacks - boolean - Set it to false (by default it is true) and transition will not produce transition events. Optional + */ + slideNext: (speed: number, runCallbacks: boolean) => {}; + + /** + * Run transition to previous slide + // speed - number - transition duration (in ms). Optional + // runCallbacks - boolean - Set it to false (by default it is true) and transition will not produce transition events. Optional + */ + slidePrev: (speed: number, runCallbacks: boolean) => {}; + + /** + * Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter. + * + * @param index - index number of slide + * @param speed - transition duration (in ms). Optional + * @param runCallbacks - Set it to false (by default it is true) and transition will not produce transition events. Optional + */ + slideTo: (index: number, speed: number, runCallbacks: boolean) => {}; + + /** + * You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with Swiper + * This method also includes subcall of the following methods which you can use separately: + */ + update: () => {}; + + /** + * recalculate size of swiper container + */ + updateSize: () => {}; + /** + * recalculate number of slides and their offsets. Useful after you add/remove slides with JavaScript + */ + updateSlides: () => {}; + /** + * recalculate swiper progress + */ + updateProgress: () => {}; + /** + * update active/prev/next classes on slides and bullets + */ + updateSlidesClasses: () => {}; + /** + * tach all events listeners + */ + detachEvents: () => {}; + /** + * Atach all events listeners again + */ + attachEvents: () => {}; + /** + * Destroy slider instance and detach all events listeners, where + */ + destroy: (deleteInstance: any, cleanStyles: any) => {}; + /** + * Set it to false (by default it is true) to not to delete Swiper instance + */ + deleteInstance: boolean; + /** + * Set it to true (by default it is true) and all custom styles will be removed from slides, wrapper and container. Useful if you need to destroy Swiper and to init again with new options or in different direction + */ + cleanStyles: boolean; + /** + * Add new slides to the end. slides could be HTMLElement or HTML string with new slide or array with such slides, for example: + * + * @example appendSlide('
Slide 10"
') + * @example appendSlide(['
Slide 10"
', '
Slide 11"
']); + */ + appendSlide: (slides: string | string[]) => {}; + /** + * Add new slides to the beginning. slides could be HTMLElement or HTML string with new slide or array with such slides, for example: + * + * @example prependSlide('
Slide 0"
') + * @example prependSlide(['
Slide 1"
', '
Slide 2"
']); + */ + prependSlide: (slides: string | string[]) => {}; + /** + * Remove selected slides. slideIndex could be a number with slide index to remove or array with indexes. + * + * @example removeSlide(0); // remove first slide + * @example removeSlide([0, 1]); // remove first and second slides + * @example removeAllSlides(); // Remove all slides + */ + removeSlide: (slideIndex: number | number[]) => {}; + /** + * Set custom css3 transform's translate value for swiper wrapper + */ + setTranslate: (translate: any) => {}; + /** + * Get current value of swiper wrapper css3 transform translate + */ + getTranslate: () => {}; + + /** + * Add event listener + */ + on: (event: any, handler: any) => {}; + + /** + * Add event listener that will be executed only once + */ + once: (event: any, handler: any) => {}; + + /** + * Remove event listener for specified event + * If no handler specified, removes all listeners for specified event + */ + off: (event: any, handler?: any) => {}; + + /** + * Disable mousewheel control + */ + disableMousewheelControl: () => {}; + + /** + * Enable mousewheel control + */ + enableMousewheelControl: () => {}; + + /** + * Disable keyboard control + */ + disableKeyboardControl: () => {}; + + /** + * Enable keyboard control + */ + enableKeyboardControl: () => {}; + + /** + * Unset grab cursor + */ + unsetGrabCursor: () => {}; + + /** + * Set grab cursor + */ + setGrabCursor: () => {}; + + /* + * Not documented as property. + */ + public zoom: Zoom; + + static use: (modules: any[]) => void; + } /** - * Element with slider container. + * Virtual Slides module (virtual as) */ - el: HTMLElement; + class Virtual { + [x: string]: any; + } /** - * Dom7 element with slider container HTML element. To get vanilla HTMLElement use el + * Keyboard Control module (keyboard as) */ - $el: DOM7Element; + class Keyboard { + [x: string]: any; + } /** - * Slider wrapper HTML element. + * Mousewheel Control module (mousewheel as) */ - wrapperEl: HTMLElement; + class Mousewheel { + [x: string]: any; + } /** - * Dom7 element with slider wrapper HTML element. To get vanilla HTMLElement use wrapperEl + * Navigation module (navigation as) */ - $wrapperEl: DOM7Element; + class Navigation { + [x: string]: any; + } /** - * Dom7 array-like collection of slides HTML elements. To get specific slide HTMLElement use slides[1] + * Pagination module (pagination as) */ - slides: DOM7Element[]; + class Pagination { + [x: string]: any; + } /** - * Width of container + * Scrollbar module (scrollbar as) */ - width; + class Scrollbar { + [x: string]: any; + } /** - * Height of container + * Parallax module (parallax as) */ - height; + class Parallax { + [x: string]: any; + } /** - * Current value of wrapper translate + * Zoom module (zoom as) */ - translate; + class Zoom { + [x: string]: any; + } /** - * Current progress of wrapper translate (from 0 to 1) + * Lazy module (lazy as) */ - progress: number; + class Lazy { + [x: string]: any; + } /** - * Index number of currently active slide. - * Note, that in loop mode active index value will be always shifted on a number of looped/duplicated slides + * Controller module (controller as) */ - activeIndex: number; + class Controller { + [x: string]: any; + } /** - * Index number of currently active slide considering duplicated slides in loop mode + * Accessibility module (a11y$) */ - realIndex: number; + class A11y { + [x: string]: any; + } /** - * Index number of previously active slide + * History Navigation module (history as) */ - previousIndex: number; + class History { + [x: string]: any; + } /** - * true if slider on most "left"/"top" position + * Hash Navigation module (hashNavigation as) */ - isBeginning: boolean; + class HashNavigation { + [x: string]: any; + } /** - * true if slider on most "right"/"bottom" position + * Autoplay module (autoplay as) */ - isEnd: boolean; + class Autoplay { + [x: string]: any; + } /** - * true if swiper is in transition + * Fade Effect module (effectFade as) */ - animating: boolean; + class EffectFade { + [x: string]: any; + } /** - * Object with the following touch event properties: + * Cube Effect module (effectCube as) */ - touches: { - startX: any, - startY: any, - currentX: any, - currentY: any, - diff: any - }; + class EffectCube { + [x: string]: any; + } /** - * Index number of last clicked slide + * Flip Effect module (effectFlip as) */ - clickedIndex: number; + class EffectFlip { + [x: string]: any; + } /** - * Link to last clicked slide (HTMLElement) + * Coverflow Effect module (effectCoverflow as) + */ + class EffectCoverflow { + [x: string]: any; + } + + /* + * Swiper options and events. */ - clickedSlide: HTMLElement; /** - * Disable/enable ability to slide to the next slides by assigning false/true to this property + * All the Swiper events. */ - allowSlideNext: boolean; + interface SwiperEvents { - /** - * Disable/enable ability to slide to the previous slides by assigning false/true to this property - */ - allowSlidePrev: boolean; + /** + * Event will be fired right after Swiper initialization. Note that with swiper.on('init') syntax it will work only in case you set init: false parameter. + * + * @example + * var swiper = new Swiper('.swiper-container', { + * init: false, + * // other parameters + * }); + * + * @example + * swiper.on('init', function() { + * // do something + * }); + * + * @example + * // init Swiper + * swiper.init(); + * + * @example + * // Otherwise use it as the parameter: + * var swiper = new Swiper('.swiper-container', { + * // other parameters + * on: { + * init: function () { + * // do something + * }, + * } + * }); + */ + init: () => {}; - /** - * 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 - */ - allowTouchMove: boolean; + /** + * Event will be fired right beforey Swiper destoryed + */ + beforeDestroy: () => {}; - // Methods + /** + * Event will be fired when currently active slide is changed + */ + slideChange: () => {}; - /** - * Run transition to next slide - * speed - number - transition duration (in ms). Optional - * runCallbacks - boolean - Set it to false (by default it is true) and transition will not produce transition events. Optional - */ - slideNext: (speed: number, runCallbacks: boolean) => {}; + /** + * Event will be fired in the beginning of animation to other slide (next or previous). + */ + slideChangeTransitionStart: () => {}; - /** - * Run transition to previous slide - * speed - number - transition duration (in ms). Optional - * runCallbacks - boolean - Set it to false (by default it is true) and transition will not produce transition events. Optional - */ - slidePrev: (speed: number, runCallbacks: boolean) => {}; + /** + * Event will be fired after animation to other slide (next or previous). + */ + slideChangeTransitionEnd: () => {}; - /** - * Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter. - * - * @param index - index number of slide - * @param speed - transition duration (in ms). Optional - * @param runCallbacks - Set it to false (by default it is true) and transition will not produce transition events. Optional - */ - slideTo: (index: number, speed: number, runCallbacks: boolean) => {}; + /** + * Same as "slideChangeTransitionStart" but for "forward" direction only + */ + slideNextTransitionStart: () => {}; - /** - * You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with Swiper - * This method also includes subcall of the following methods which you can use separately: - */ - update: () => {}; + /** + * Same as "slideChangeTransitionEnd" but for "forward" direction only + */ + slideNextTransitionEnd: () => {}; - /** - * recalculate size of swiper container - */ - updateSize: () => {}; - /** - * recalculate number of slides and their offsets. Useful after you add/remove slides with JavaScript - */ - updateSlides: () => {}; - /** - * recalculate swiper progress - */ - updateProgress: () => {}; - /** - * update active/prev/next classes on slides and bullets - */ - updateSlidesClasses: () => {}; - /** - * tach all events listeners - */ - detachEvents: () => {}; - /** - * Atach all events listeners again - */ - attachEvents: () => {}; - /** - * Destroy slider instance and detach all events listeners, where - */ - destroy: (deleteInstance: any, cleanStyles: any) => {}; - /** - * Set it to false (by default it is true) to not to delete Swiper instance - */ - deleteInstance: boolean; - /** - * Set it to true (by default it is true) and all custom styles will be removed from slides, wrapper and container. Useful if you need to destroy Swiper and to init again with new options or in different direction - */ - cleanStyles: boolean; - /** - * Add new slides to the end. slides could be HTMLElement or HTML string with new slide or array with such slides, for example: - * - * @example appendSlide('
Slide 10"
') - * @example appendSlide(['
Slide 10"
', '
Slide 11"
']); - */ - appendSlide: (slides: string | string[]) => {}; - /** - * Add new slides to the beginning. slides could be HTMLElement or HTML string with new slide or array with such slides, for example: - * - * @example prependSlide('
Slide 0"
') - * @example prependSlide(['
Slide 1"
', '
Slide 2"
']); - */ - prependSlide: (slides: string | string[]) => {}; - /** - * Remove selected slides. slideIndex could be a number with slide index to remove or array with indexes. - * - * @example removeSlide(0); // remove first slide - * @example removeSlide([0, 1]); // remove first and second slides - * @example removeAllSlides(); // Remove all slides - */ - removeSlide: (slideIndex: number | number[]) => {}; - /** - * Set custom css3 transform's translate value for swiper wrapper - */ - setTranslate: (translate: any) => {}; - /** - * Get current value of swiper wrapper css3 transform translate - */ - getTranslate: () => {}; + /** + * Same as "slideChangeTransitionStart" but for "backward" direction only + */ + slidePrevTransitionStart: () => {}; - /** - * Add event listener - */ - on: (event: any, handler: any) => {}; + /** + * Same as "slideChangeTransitionEnd" but for "backward" direction only + */ + slidePrevTransitionEnd: () => {}; - /** - * Add event listener that will be executed only once - */ - once: (event: any, handler: any) => {}; + /** + * Event will be fired in the beginning of transition. + */ + transitionStart: () => {}; - /** - * Remove event listener for specified event - * If no handler specified, removes all listeners for specified event - */ - off: (event: any, handler?: any) => {}; + /** + * Event will be fired after transition. + */ + transitionEnd: () => {}; - /** - * Disable mousewheel control - */ - disableMousewheelControl: () => {}; + /** + * Event will be fired when user touch Swiper. Receives 'touchstart' event as an arguments. + */ + touchStart: (event: any) => {}; - /** - * Enable mousewheel control - */ - enableMousewheelControl: () => {}; + /** + * Event will be fired when user touch and move finger over Swiper. Receives 'touchmove' event as an arguments. + */ + touchMove: (event: any) => {}; - /** - * Disable keyboard control - */ - disableKeyboardControl: () => {}; + /** + * Event will be fired when user touch and move finger over Swiper in direction opposite to direction parameter. Receives 'touchmove' event as an arguments. + */ + touchMoveOpposite: (event: any) => {}; - /** - * Enable keyboard control - */ - enableKeyboardControl: () => {}; + /** + * Event will be fired when user touch and move finger over Swiper and move it. Receives 'touchmove' event as an arguments. + */ + sliderMove: (event: any) => {}; - /** - * Unset grab cursor - */ - unsetGrabCursor: () => {}; + /** + * Event will be fired when user release Swiper. Receives 'touchend' event as an arguments. + */ + touchEnd: (event: any) => {}; - /** - * Set grab cursor - */ - setGrabCursor: () => {}; + /** + * Event will be fired when user click/tap on Swiper after 300ms delay. Receives 'touchend' event as an arguments. + */ + click: (event: any) => {}; + + /** + * Event will be fired when user click/tap on Swiper. Receives 'touchend' event as an arguments. + */ + tap: (event: any) => {}; + + /** + * Event will be fired when user double tap on Swiper's container. Receives 'touchend' event as an arguments + */ + doubleTap: (event: any) => {}; + + /** + * Event will be fired right after all inner images are loaded. updateOnImagesReady should be also enabled + */ + imagesReady: () => {}; + + /** + * Event will be fired when Swiper progress is changed, as an arguments it receives progress that is always from 0 to 1 + */ + progress: (progress: any) => {}; + + /** + * Event will be fired when Swiper reach its beginning (initial position) + */ + reachBeginning: () => {}; + + /** + * Event will be fired when Swiper reach last slide + */ + reachEnd: () => {}; + + /** + * Event will be fired when Swiper goes from beginning or end position + */ + fromEdge: () => {}; + + /** + * Event will be fired when swiper's wrapper change its position. Receives current translate value as an arguments + */ + setTranslate: (translate: any) => {}; + + + /** + * Event will be fired everytime when swiper starts animation. Receives current transition duration (in ms) as an arguments, + */ + setTransition: (transition: any) => {}; + + /** + * Event will be fired on window resize right before swiper's onresize manipulation + */ + resize: () => {}; + } + + interface SwiperOptions { + + init?: boolean; + initialSlide?: number; + direction?: string; + speed?: number; + setWrapperSize?: boolean; + virtualTranslate?: boolean; + width?: number; + height?: number; + autoHeight?: boolean; + roundLengths?: boolean; + nested?: boolean; + uniqueNavElements?: boolean; + effect?: string; + runCallbacksOnInit?: boolean; + watchOverflow?: boolean; + on?: EventsOptions; + + // Slides grid + spaceBetween?: number; + slidesPerView?: number | string; // 'auto' + slidesPerColumn?: number; + slidesPerColumnFill?: string; + slidesPerGroup?: number; + centeredSlides?: boolean; + slidesOffsetBefore?: number; + slidesOffsetAfter?: number; + normalizeSlideIndex?: boolean; + + // Grab Cursor + grabCursor?: boolean; + + // Touches + touchEventsTarget?: string; + touchRatio?: number; + touchAngle?: number; + simulateTouch?: boolean; + shortSwipes?: boolean; + longSwipes?: boolean; + longSwipesRatio?: number; + longSwipesMs?: number; + followFinger?: boolean; + allowTouchMove?: boolean; + threshold?: number; + touchMoveStopPropagation?: boolean; + iOSEdgeSwipeDetection?: boolean; + iOSEdgeSwipeThreshold?: number; + touchReleaseOnEdges?: boolean; + passiveListeners?: boolean; + + // Touch Resistance + resistance?: boolean; + resistanceRatio?: number; + + // Swiping / No swiping + allowSlidePrev?: boolean; + allowSlideNext?: boolean; + noSwiping?: boolean; + noSwipingClass?: string; + swipeHandler?: SelectableElement; + + // Clicks + preventClicks?: boolean; + preventClicksPropagation?: boolean; + slideToClickedSlide?: boolean; + + // Freemode + freeMode?: boolean; + freeModeMomentum?: boolean; + freeModeMomentumRatio?: number; + freeModeMomentumVelocityRatio?: number; + freeModeMomentumBounce?: boolean; + freeModeMomentumBounceRatio?: number; + freeModeMinimumVelocity?: number; + freeModeSticky?: boolean; + + // Progress + watchSlidesProgress?: boolean; + watchSlidesVisibility?: boolean; + + // Images + preloadImages?: boolean; + updateOnImagesReady?: boolean; + + // Loop + loop?: boolean; + loopAdditionalSlides?: number; + loopedSlides?: number; + loopFillGroupWithBlank?: boolean; + + // Breakpoints + breakpoints?: object; + + // Observer + observer?: boolean; + observeParents?: boolean; + + // Namespace + containerModifierClass?: string; + slideClass?: string; + slideActiveClass?: string; + slideDuplicatedActiveClass?: string; + slideVisibleClass?: string; + slideDuplicateClass?: string; + slideNextClass?: string; + slideDuplicatedNextClass?: string; + slidePrevClass?: string; + slideDuplicatedPrevClass?: string; + wrapperClass?: string; + + // Components + navigation?: NavigationOptions; + pagination?: PaginationOptions; + scrollbar?: ScrollbarOptions; + autoplay?: AutoplayOptions | boolean; + parallax?: boolean; + lazy?: LazyOptions | boolean; + fadeEffect?: EffectFadeOptions; + coverflowEffect?: EffectCoverflowOptions; + flipEffect?: EffectFlipOptions; + cubeEffect?: EffectCubeOptions; + zoom?: ZoomOptions | boolean; + keyboard?: KeyboardOptions | boolean; + mousewheel?: MousewheelOptions | boolean; + virtual?: VirtualOptions | boolean; + hashNavigation?: HashNavigationOptions | boolean; + history?: HistoryNavigationOptions | boolean; + a11y?: A11yOptions | boolean; + } + + interface EventsOptions { + init: () => {}; + beforeDestroy: () => {}; + slideChange: () => {}; + slideChangeTransitionStart: () => {}; + slideChangeTransitionEnd: () => {}; + slideNextTransitionStart: () => {}; + slideNextTransitionEnd: () => {}; + slidePrevTransitionStart: () => {}; + slidePrevTransitionEnd: () => {}; + transitionStart: () => {}; + transitionEnd: () => {}; + touchStart: (event: any) => {}; + touchMove: (event: any) => {}; + touchMoveOpposite: (event: any) => {}; + sliderMove: (event: any) => {}; + touchEnd: (event: any) => {}; + click: (event: any) => {}; + tap: (event: any) => {}; + doubleTap: (event: any) => {}; + imagesReady: () => {}; + progress: (progress: any) => {}; + reachBeginning: () => {}; + reachEnd: () => {}; + fromEdge: () => {}; + setTranslate: (translate: any) => {}; + setTransition: (transition: any) => {}; + resize: () => {}; + } + + interface NavigationOptions { + + /** + * String with CSS selector or HTML element of the element that will work like "next" button after click on it + * + * @default null + */ + nextEl?: SelectableElement; + + /** + * String with CSS selector or HTML element of the element that will work like "prev" button after click on it + * + * @default null + */ + prevEl?: SelectableElement; + + /** + * buttons visibility after click on Slider's container + * + * @default false Toggle navigation + */ + hideOnClick?: boolean; + + /** + * CSS class name added to navigation button when it becomes disabled + * + * @default 'swiper-button-disabled' + */ + disabledClass?: string; + + /** + * CSS class name added to navigation button when it becomes hidden + * + * @default 'swiper-button-hidden' + */ + hiddenClass?: string; + + } + + interface OptionsWithElement { + el: SelectableElement; + } + + interface PaginationOptions extends OptionsWithElement { + type?: string; + bulletElement?: string; + dynamicBullets?: boolean; + hideOnClick?: boolean; + clickable?: boolean; + renderBullet?: (index: any, className: any) => {}; + renderFraction?: (currentClass: any, totalClass: any) => {}; + renderProgressbar?: (progressbarFillClass: any) => {}; + renderCustom?: (swiper: any, current: any, total: any) => {}; + bulletClass?: string; + bulletActiveClass?: string; + modifierClass?: string; + currentClass?: string; + totalClass?: string; + hiddenClass?: string; + progressbarFillClass?: string; + clickableClass?: string; + } + + interface ScrollbarOptions extends OptionsWithElement { + hide: boolean; + draggable: boolean; + snapOnRelease: boolean; + dragSize: string | number; + } + + interface AutoplayOptions { + + /** + * Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled + * + * If you need to specify different delay for specifi slides you can do it by using data-swiper-autoplay (in ms) attribute on slide. + * + * @example + * + *
+ * stopOnLast: boolean // default: false Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode) + * + * @default 3000 + */ + delay?: number; + + /** + * Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction + * + * @default true + */ + disableOnInteraction?: boolean; + + /** + * Enables autoplay in reverse direction + * + * @default false + */ + reverseDirection?: boolean; + + /** + * When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your + * slider may not have transition + * + * @default true + */ + waitForTransition?: boolean; + + } + + interface LazyOptions { + loadPrevNext: boolean; + loadPrevNextAmount: number; + loadOnTransitionStart: boolean; + elementClass: string; + loadingClass: string; + loadedClass: string; + preloaderClass: string; + } + + // Effects + + interface EffectFadeOptions { + crossfade: boolean; + } + + interface EffectCoverflowOptions { + slideShadows: boolean; + rotate: number; + stretch: number; + depth: number; + modifier: number; + } + + interface EffectFlipOptions { + slideShadows: boolean; + limitRotation: boolean; + } + + interface EffectCubeOptions { + slideShadows: boolean; + shadow: boolean; + shadowOffset: number; + shadowScale: number; + } + + interface ZoomOptions { + maxRatio?: number; + minRatio?: number; + toggle?: boolean; + containerClass?: string; + zoomedSlideClass?: string; + } + + interface KeyboardOptions { + enabled: boolean; + onlyInViewport: boolean; + } + + interface MousewheelOptions { + forceToAxis: boolean; + releaseOnEdges: boolean; + invert: boolean; + sensitivity: number; + eventsTarged: SelectableElement; + } + + interface VirtualOptions { + slides: any[]; + cache: boolean; + renderSlide: (slide: any, index: any) => {}; + renderExternal: (data: any) => {}; + } + + interface HashNavigationOptions { + watchState: boolean; + replaceState: boolean; + } + + interface HistoryNavigationOptions { + replaceState: boolean; + key: string; + } + + interface ControllerOptions { + control: Swiper; + inverse: boolean; + by: string; + } + + interface A11yOptions { + prevSlideMessage: string; + nextSlideMessage: string; + firstSlideMessage: string; + lastSlideMessage: string; + paginationBulletMessage: string; + notificationClass: string; + } } -export interface SwiperEvents { - - /** - * Event will be fired right after Swiper initialization. Note that with swiper.on('init') syntax it will work only in case you set init: false parameter. - * - * @example - * var swiper = new Swiper('.swiper-container', { - * init: false, - * // other parameters - * }); - * - * @example - * swiper.on('init', function() { - * // do something - * }); - * - * @example - * // init Swiper - * swiper.init(); - * - * @example - * // Otherwise use it as the parameter: - * var swiper = new Swiper('.swiper-container', { - * // other parameters - * on: { - * init: function () { - * // do something - * }, - * } - * }); - */ - init: () => {}; - - /** - * Event will be fired right beforey Swiper destoryed - */ - beforeDestroy: () => {}; - - /** - * Event will be fired when currently active slide is changed - */ - slideChange: () => {}; - - /** - * Event will be fired in the beginning of animation to other slide (next or previous). - */ - slideChangeTransitionStart: () => {}; - - /** - * Event will be fired after animation to other slide (next or previous). - */ - slideChangeTransitionEnd: () => {}; - - /** - * Same as "slideChangeTransitionStart" but for "forward" direction only - */ - slideNextTransitionStart: () => {}; - - /** - * Same as "slideChangeTransitionEnd" but for "forward" direction only - */ - slideNextTransitionEnd: () => {}; - - /** - * Same as "slideChangeTransitionStart" but for "backward" direction only - */ - slidePrevTransitionStart: () => {}; - - /** - * Same as "slideChangeTransitionEnd" but for "backward" direction only - */ - slidePrevTransitionEnd: () => {}; - - /** - * Event will be fired in the beginning of transition. - */ - transitionStart: () => {}; - - /** - * Event will be fired after transition. - */ - transitionEnd: () => {}; - - /** - * Event will be fired when user touch Swiper. Receives 'touchstart' event as an arguments. - */ - touchStart: (event: any) => {}; - - /** - * Event will be fired when user touch and move finger over Swiper. Receives 'touchmove' event as an arguments. - */ - touchMove: (event: any) => {}; - - /** - * Event will be fired when user touch and move finger over Swiper in direction opposite to direction parameter. Receives 'touchmove' event as an arguments. - */ - touchMoveOpposite: (event: any) => {}; - - /** - * Event will be fired when user touch and move finger over Swiper and move it. Receives 'touchmove' event as an arguments. - */ - sliderMove: (event: any) => {}; - - /** - * Event will be fired when user release Swiper. Receives 'touchend' event as an arguments. - */ - touchEnd: (event: any) => {}; - - /** - * Event will be fired when user click/tap on Swiper after 300ms delay. Receives 'touchend' event as an arguments. - */ - click: (event: any) => {}; - - /** - * Event will be fired when user click/tap on Swiper. Receives 'touchend' event as an arguments. - */ - tap: (event: any) => {}; - - /** - * Event will be fired when user double tap on Swiper's container. Receives 'touchend' event as an arguments - */ - doubleTap: (event: any) => {}; - - /** - * Event will be fired right after all inner images are loaded. updateOnImagesReady should be also enabled - */ - imagesReady: () => {}; - - /** - * Event will be fired when Swiper progress is changed, as an arguments it receives progress that is always from 0 to 1 - */ - progress: (progress: any) => {}; - - /** - * Event will be fired when Swiper reach its beginning (initial position) - */ - reachBeginning: () => {}; - - /** - * Event will be fired when Swiper reach last slide - */ - reachEnd: () => {}; - - /** - * Event will be fired when Swiper goes from beginning or end position - */ - fromEdge: () => {}; - - /** - * Event will be fired when swiper's wrapper change its position. Receives current translate value as an arguments - */ - setTranslate: (translate: any) => {}; - - - /** - * Event will be fired everytime when swiper starts animation. Receives current transition duration (in ms) as an arguments, - */ - setTransition: (transition: any) => {}; - - /** - * Event will be fired on window resize right before swiper's onresize manipulation - */ - resize: () => {}; -} - -export interface SwiperOptions { - - init?: boolean; - initialSlide?: number; - direction?: string; - speed?: number; - setWrapperSize?: boolean; - virtualTranslate?: boolean; - width?: number; - height?: number; - autoHeight?: boolean; - roundLengths?: boolean; - nested?: boolean; - uniqueNavElements?: boolean; - effect?: string; - runCallbacksOnInit?: boolean; - watchOverflow?: boolean; - on?: EventsOptions; - - // Slides grid - spaceBetween?: number; - slidesPerView?: number | string; // 'auto' - slidesPerColumn?: number; - slidesPerColumnFill?: string; - slidesPerGroup?: number; - centeredSlides?: boolean; - slidesOffsetBefore?: number; - slidesOffsetAfter?: number; - normalizeSlideIndex?: boolean; - - // Grab Cursor - grabCursor?: boolean; - - // Touches - touchEventsTarget?: string; - touchRatio?: number; - touchAngle?: number; - simulateTouch?: boolean; - shortSwipes?: boolean; - longSwipes?: boolean; - longSwipesRatio?: number; - longSwipesMs?: number; - followFinger?: boolean; - allowTouchMove?: boolean; - threshold?: number; - touchMoveStopPropagation?: boolean; - iOSEdgeSwipeDetection?: boolean; - iOSEdgeSwipeThreshold?: number; - touchReleaseOnEdges?: boolean; - passiveListeners?: boolean; - - // Touch Resistance - resistance?: boolean; - resistanceRatio?: number; - - // Swiping / No swiping - allowSlidePrev?: boolean; - allowSlideNext?: boolean; - noSwiping?: boolean; - noSwipingClass?: string; - swipeHandler?: SelectableElement; - - // Clicks - preventClicks?: boolean; - preventClicksPropagation?: boolean; - slideToClickedSlide?: boolean; - - // Freemode - freeMode?: boolean; - freeModeMomentum?: boolean; - freeModeMomentumRatio?: number; - freeModeMomentumVelocityRatio?: number; - freeModeMomentumBounce?: boolean; - freeModeMomentumBounceRatio?: number; - freeModeMinimumVelocity?: number; - freeModeSticky?: boolean; - - // Progress - watchSlidesProgress?: boolean; - watchSlidesVisibility?: boolean; - - // Images - preloadImages?: boolean; - updateOnImagesReady?: boolean; - - // Loop - loop?: boolean; - loopAdditionalSlides?: number; - loopedSlides?: number; - loopFillGroupWithBlank?: boolean; - - // Breakpoints - breakpoints?: any; - - // Observer - observer?: boolean; - observeParents?: boolean; - - // Namespace - containerModifierClass?: string; - slideClass?: string; - slideActiveClass?: string; - slideDuplicatedActiveClass?: string; - slideVisibleClass?: string; - slideDuplicateClass?: string; - slideNextClass?: string; - slideDuplicatedNextClass?: string; - slidePrevClass?: string; - slideDuplicatedPrevClass?: string; - wrapperClass?: string; - - // Components - navigation?: NavigationOptions; - pagination?: PaginationOptions; - scrollbar?: ScrollbarOptions; - autoplay?: AutoplayOptions | boolean; - parallax?: boolean; - lazy?: LazyOptions | boolean; - fadeEffect?: EffectFadeOptions; - coverflowEffect?: EffectCoverflowOptions; - flipEffect?: EffectFlipOptions; - cubeEffect?: EffectCubeOptions; - zoom?: ZoomOptions | boolean; - keyboard?: KeyboardOptions | boolean; - mousewheel?: MousewheelOptions | boolean; - virtual?: VirtualOptions | boolean; - hashNavigation?: HashNavigationOptions | boolean; - history?: HistoryNavigationOptions | boolean; - a11y?: A11yOptions | boolean; -} - -export declare interface EventsOptions { - init: () => {}; - beforeDestroy: () => {}; - slideChange: () => {}; - slideChangeTransitionStart: () => {}; - slideChangeTransitionEnd: () => {}; - slideNextTransitionStart: () => {}; - slideNextTransitionEnd: () => {}; - slidePrevTransitionStart: () => {}; - slidePrevTransitionEnd: () => {}; - transitionStart: () => {}; - transitionEnd: () => {}; - touchStart: (event: any) => {}; - touchMove: (event: any) => {}; - touchMoveOpposite: (event: any) => {}; - sliderMove: (event: any) => {}; - touchEnd: (event: any) => {}; - click: (event: any) => {}; - tap: (event: any) => {}; - doubleTap: (event: any) => {}; - imagesReady: () => {}; - progress: (progress: any) => {}; - reachBeginning: () => {}; - reachEnd: () => {}; - fromEdge: () => {}; - setTranslate: (translate: any) => {}; - setTransition: (transition: any) => {}; - resize: () => {}; -} - -export declare interface NavigationOptions { - - /** - * String with CSS selector or HTML element of the element that will work like "next" button after click on it - * - * @default null - */ - nextEl: SelectableElement; - - /** - * String with CSS selector or HTML element of the element that will work like "prev" button after click on it - * - * @default null - */ - prevEl: SelectableElement; - - /** - * buttons visibility after click on Slider's container - * - * @default false Toggle navigation - */ - hideOnClick: boolean; - - /** - * CSS class name added to navigation button when it becomes disabled - * - * @default 'swiper-button-disabled' - */ - disabledClass: string; - - /** - * CSS class name added to navigation button when it becomes hidden - * - * @default 'swiper-button-hidden' - */ - hiddenClass: string; - -} - -export declare interface OptionsWithElement { - el: SelectableElement; -} - -export declare interface PaginationOptions extends OptionsWithElement { - type?: string; - bulletElement?: string; - dynamicBullets?: boolean; - hideOnClick?: boolean; - clickable?: boolean; - renderBullet?: (index: any, className: any) => {}; - renderFraction?: (currentClass: any, totalClass: any) => {}; - renderProgressbar?: (progressbarFillClass: any) => {}; - renderCustom?: (swiper: any, current: any, total: any) => {}; - bulletClass?: string; - bulletActiveClass?: string; - modifierClass?: string; - currentClass?: string; - totalClass?: string; - hiddenClass?: string; - progressbarFillClass?: string; - clickableClass?: string; -} - -export declare interface ScrollbarOptions extends OptionsWithElement { - hide: boolean; - draggable: boolean; - snapOnRelease: boolean; - dragSize: string | number; -} - -export declare interface AutoplayOptions extends OptionsWithElement { - - /** - * Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled - * - * If you need to specify different delay for specifi slides you can do it by using data-swiper-autoplay (in ms) attribute on slide. - * - * @example - * - *
- * stopOnLast: boolean // default: false Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode) - * - * @default 3000 - */ - delay: number; - - /** - * Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction - * - * @default true - */ - disableOnInteraction: boolean; - - /** - * Enables autoplay in reverse direction - * - * @default false - */ - reverseDirection: boolean; - - /** - * When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your - * slider may not have transition - * - * @default true - */ - waitForTransition: boolean; - -} - -export declare interface LazyOptions { - loadPrevNext: boolean; - loadPrevNextAmount: number; - loadOnTransitionStart: boolean; - elementClass: string; - loadingClass: string; - loadedClass: string; - preloaderClass: string; -} - -// Effects - -export declare interface EffectFadeOptions { - crossfade: boolean; -} - -export declare interface EffectCoverflowOptions { - slideShadows: boolean; - rotate: number; - stretch: number; - depth: number; - modifier: number; -} - -export declare interface EffectFlipOptions { - slideShadows: boolean; - limitRotation: boolean; -} - -export declare interface EffectCubeOptions { - slideShadows: boolean; - shadow: boolean; - shadowOffset: number; - shadowScale: number; -} - -export declare interface ZoomOptions { - maxRatio: number; - minRatio: number; - toggle: boolean; - containerClass: string; - zoomedSlideClass: string; -} - -export declare interface KeyboardOptions { - enabled: boolean; - onlyInViewport: boolean; -} - -export declare interface MousewheelOptions { - forceToAxis: boolean; - releaseOnEdges: boolean; - invert: boolean; - sensitivity: number; - eventsTarged: SelectableElement; -} - -export declare interface VirtualOptions { - slides: any[]; - cache: boolean; - renderSlide: (slide: any, index: any) => {}; - renderExternal: (data: any) => {}; -} - -export declare interface HashNavigationOptions { - watchState: boolean; - replaceState: boolean; -} - -export declare interface HistoryNavigationOptions { - replaceState: boolean; - key: string; -} - -export declare interface ControllerOptions { - control: Swiper; - inverse: boolean; - by: string; -} - -export declare interface A11yOptions { - prevSlideMessage: string; - nextSlideMessage: string; - firstSlideMessage: string; - lastSlideMessage: string; - paginationBulletMessage: string; - notificationClass: string; -} - - -// Swiper exports the folloing as ES5 module (in swiper.esm.js), so we gotta make sure that everything is exported here. -// export { - - /** - * Core module - */ - // Swiper, - - /** - * Virtual Slides module (virtual as) - */ - // Virtual, - - /** - * Keyboard Control module (keyboard as) - */ - // Keyboard, - - /** - * Mousewheel Control module (mousewheel as) - */ - // Mousewheel, - - /** - * Navigation module (navigation as) - */ - // Navigation, - - /** - * Pagination module (pagination as) - */ - // Pagination, - - /** - * Scrollbar module (scrollbar as) - */ - // Scrollbar, - - /** - * Parallax module (parallax as) - */ - // Parallax, - - /** - * Zoom module (zoom as) - */ - // Zoom, - - /** - * Lazy module (lazy as) - */ - // Lazy, - - /** - * Controller module (controller as) - */ - // Controller, - - /** - * Accessibility module (a11y$) - */ - // A11y, - - /** - * History Navigation module (history as) - */ - // History, - - /** - * Hash Navigation module (hashNavigation as) - */ - // HashNavigation, - - /** - * Autoplay module (autoplay as) - */ - // Autoplay, - - /** - * Fade Effect module (effectFade as) - */ - // EffectFade, - - /** - * Cube Effect module (effectCube as) - */ - // EffectCube, - - /** - * Flip Effect module (effectFlip as) - */ - // EffectFlip, - - /** - * Coverflow Effect module (effectCoverflow as) - */ - // EffectCoverflow - -// }; +declare module 'swiper/dist/js/swiper.esm.js' { + import alias = require('swiper'); + export = alias; + }