feat(slides): update swiper to latest

* feat(slides): update swiper to latest

* chore(slides): remove debug

core/src/components/slides/slides.tsx

@@ -1,5 +1,13 @@
-import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
+import {
-import { Swiper } from './vendor/swiper.js';
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  Method,
+  Prop,
+  Watch
+} from '@stencil/core';
+import { Swiper }  from './vendor/swiper.js';
 @Component({
   tag: 'ion-slides',
   styleUrls: {
@@ -12,7 +20,6 @@ import { Swiper } from './vendor/swiper.js';
   assetsDir: 'vendor'
 })
 export class Slides {
-
   private container!: HTMLElement;
   private swiper: any;
 
@@ -106,22 +113,15 @@ export class Slides {
   }
 
   componentDidUnload() {
-    this.enableKeyboardControl(false);
     this.swiper.destroy(true, true);
   }
 
   private initSlides() {
     console.debug(`ion-slides, init`);
-
     this.container = this.el.children[0] as HTMLElement;
     const finalOptions = this.normalizeOptions();
     // init swiper core
     this.swiper = new Swiper(this.container, finalOptions);
-
-    if (finalOptions.keyboardControl) {
-      // init keyboard event listeners
-      this.enableKeyboardControl(true);
-    }
   }
 
   /**
@@ -203,7 +203,7 @@ export class Slides {
    */
   @Method()
   startAutoplay(): void {
-    this.swiper.startAutoplay();
+    this.swiper.autoplay.start();
   }
 
   /**
@@ -211,7 +211,7 @@ export class Slides {
    */
   @Method()
   stopAutoplay(): void {
-    this.swiper.stopAutoplay();
+    this.swiper.autoplay.stop();
   }
 
   /**
@@ -247,21 +247,10 @@ export class Slides {
     this.swiper.unlockSwipes();
   }
 
-  /**
-   * Enable or disable keyboard control.
-   */
-  private enableKeyboardControl(shouldEnableKeyboard: boolean) {
-    if (shouldEnableKeyboard) {
-      return this.swiper.enableKeyboardControl();
-    }
-    this.swiper.disableKeyboardControl();
-  }
-
   private normalizeOptions() {
     // Base options, can be changed
     const swiperOptions = {
       effect: 'slide',
-      autoplay: 0,
       direction: 'horizontal',
       initialSlide: 0,
       loop: false,
@@ -323,7 +312,6 @@ export class Slides {
       runCallbacksOnInit: true,
       controlBy: 'slide',
       controlInverse: false,
-      keyboardControl: true,
       coverflow: {
         rotate: 50,
         stretch: 0,
@@ -369,18 +357,12 @@ export class Slides {
     };
 
     // Merge the base, user options, and events together then pas to swiper
-    return Object.assign(
+    return Object.assign({}, swiperOptions, this.options, eventOptions);
-      {},
+  }
-      swiperOptions,
-      this.options,
-      eventOptions
-    );
-
-}
 
   render() {
     return (
-      <div class="swiper-container" data-dir="rtl">
+      <div class="swiper-container">
         <div class="swiper-wrapper">
           <slot />
         </div>

core/src/components/slides/test/basic/index.html

@@ -63,7 +63,12 @@
     }
 
     function slideAutoPlay() {
-      slides.options = Object.assign({}, slides.options, {autoplay: 300});
+      slides.options = Object.assign({}, slides.options, {
+        autoplay: {
+          delay: 2500, 
+          disableOnInteraction: false
+        } 
+      });
       slides.startAutoplay();
     }
 

core/src/components/slides/vendor/swiper.d.ts

@@ -1,11 +1,195 @@
-// Type definitions for Swiper 3.4
+// Type definitions for Swiper 4.2
 // Project: https://github.com/nolimits4web/Swiper
-// Definitions by: Sebastián Galiano <https://github.com/sgaliano/>, Luca Trazzi <https://github.com/lucax88x/>
+// Definitions by: Sebastián Galiano <https://github.com/sgaliano>, Luca Trazzi <https://github.com/lucax88x>, Eugene Matseruk <https://github.com/ematseruk>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.7
+
+type CommonEvent =
+    | 'init'
+    | 'beforeDestroy'
+    | 'slideChange'
+    | 'slideChangeTransitionStart'
+    | 'slideChangeTransitionEnd'
+    | 'slideNextTransitionStart'
+    | 'slideNextTransitionEnd'
+    | 'slidePrevTransitionStart'
+    | 'slidePrevTransitionEnd'
+    | 'transitionStart'
+    | 'transitionEnd'
+    | 'touchStart'
+    | 'touchMove'
+    | 'touchMoveOpposite'
+    | 'sliderMove'
+    | 'touchEnd'
+    | 'click'
+    | 'tap'
+    | 'doubleTap'
+    | 'imagesReady'
+    | 'progress'
+    | 'reachBeginning'
+    | 'reachEnd'
+    | 'fromEdge'
+    | 'setTranslate'
+    | 'setTransition'
+    | 'resize';
+
+type PaginationEvent = 'paginationRender' | 'paginationUpdate';
+type AutoplayEvent = 'autoplayStart' | 'autoplayStop' | 'autoplay';
+type LazyLoadingEvent = 'lazyImageLoad' | 'lazyImageReady';
+
+type SwiperEvent = CommonEvent | PaginationEvent | AutoplayEvent | LazyLoadingEvent;
+
+interface NavigationOptions {
+    nextEl?: string | HTMLElement;
+    prevEl?: string | HTMLElement;
+    hideOnClick?: boolean;
+    disabledClass?: string;
+    hiddenClass?: string;
+}
+
+interface PaginationOptions {
+    el?: string;
+    type?: 'bullets' | 'fraction' | 'progressbar' | 'custom';
+    bulletElement?: string;
+    dynamicBullets?: boolean;
+    dynamicMainBullets?: number;
+    hideOnClick?: boolean;
+    clickable?: boolean;
+    progressbarOpposite?: boolean;
+
+    bulletClass?: string;
+    bulletActiveClass?: string;
+    modifierClass?: string;
+    currentClass?: string;
+    totalClass?: string;
+    hiddenClass?: string;
+    progressbarFillClass?: string;
+    clickableClass?: string;
+
+    renderBullet?: (index: number, className: string) => void;
+    renderFraction?: (currentClass: string, totalClass: string) => void;
+    renderProgressbar?: (progressbarFillClass: string) => void;
+    renderCustom?: (swiper: Swiper, current: number, total: number) => void;
+}
+
+interface ScrollbarOptions {
+    el?: string | HTMLElement;
+    hide?: boolean;
+    draggable?: boolean;
+    snapOnRelease?: boolean;
+    dragSize?: 'auto' | number;
+    lockClass?: 'string';
+    dragClass?: 'string';
+}
+
+interface AutoplayOptions {
+    delay?: number;
+    stopOnLastSlide?: boolean;
+    disableOnInteraction?: boolean;
+    reverseDirection?: boolean;
+    waitForTransition?: boolean;
+}
+
+interface LazyLoadingOptions {
+    loadPrevNext?: string;
+    loadPrevNextAmount?: number;
+    loadOnTransitionStart?: boolean;
+    elementClass?: string;
+    loadingClass?: string;
+    loadedClass?: string;
+    preloaderClass?: string;
+}
+
+interface FadeEffectOptions {
+    crossFade: boolean;
+}
+
+interface CoverflowEffectOptions {
+    slideShadows?: boolean;
+    rotate?: number;
+    stretch?: number;
+    depth?: number;
+    modifier?: number;
+}
+
+interface FlipEffectOptions {
+    slideShadows?: boolean;
+    limitRotation?: boolean;
+}
+
+interface CubeEffectOptions {
+    slideShadows?: boolean;
+    shadow?: boolean;
+    shadowOffset: number;
+    shadowScale: number;
+}
+
+interface ZoomOptions {
+    maxRatio?: number;
+    minRatio?: number;
+    toggle?: boolean;
+    containerClass?: string;
+    zoomedSlideClass?: string;
+}
+
+interface KeyboardControlOptions {
+    enabled?: boolean;
+    onlyInViewport?: boolean;
+}
+
+interface MouseWheelControlOptions {
+    forceToAxis?: boolean;
+    releaseOnEdges?: boolean;
+    invert?: boolean;
+    sensitivity?: number;
+    eventsTarged?: string | HTMLElement;
+}
+
+interface VirtualSlidesRenderExternalData {
+    offset: number;
+    from: number;
+    to: number;
+    slides: any[];
+}
+
+interface VirtualSlidesOptions {
+    slides?: any[];
+    cache?: boolean;
+    renderSlide?: (slide: any, index: number) => void;
+    renderExternal?: (data: VirtualSlidesRenderExternalData) => void;
+}
+
+interface HashNavigationOptions {
+    watchState?: boolean;
+    replaceState?: boolean;
+}
+
+interface HistoryNavigationOptions {
+    replaceState?: boolean;
+    key?: string;
+}
+
+interface ControllerOptions {
+    control: Swiper;
+    inverse: boolean;
+    by: 'slide' | 'container';
+}
+
+interface AccessibilityOptions {
+    enabled?: boolean;
+    prevSlideMessage?: string;
+    nextSlideMessage?: string;
+    firstSlideMessage?: string;
+    lastSlideMessage?: string;
+    paginationBulletMessage?: string;
+    notificationClass?: string;
+}
 
 export interface SwiperOptions {
+    // General parameters
+    init?: boolean;
     initialSlide?: number;
-    direction?: string;
+    direction?: 'horizontal' | 'vertical';
     speed?: number;
     setWrapperSize?: boolean;
     virtualTranslate?: boolean;
@@ -14,15 +198,61 @@ export interface SwiperOptions {
     autoHeight?: boolean;
     roundLengths?: boolean;
     nested?: boolean;
+    uniqueNavElements?: boolean;
+    effect?: 'slide' | 'fade' | 'cube' | 'coverflow' | 'flip';
+    runCallbacksOnInit?: boolean;
+    watchOverflow?: boolean;
+    on?: {[key in SwiperEvent]?: () => void };
 
-    // Autoplay
+    // Slides grid
-    autoplay?: number;
+    spaceBetween?: number;
-    autoplayStopOnLast?: boolean;
+    slidesPerView?: 'auto' | number;
-    autoplayDisableOnInteraction?: boolean;
+    slidesPerColumn?: number;
+    slidesPerColumnFill?: 'row' | 'column';
+    slidesPerGroup?: number;
+    centeredSlides?: boolean;
+    slidesOffsetBefore?: number;
+    slidesOffsetAfter?: number;
+    normalizeSlideIndex?: boolean;
 
-    // Progress
+    // Grab cursor
-    watchSlidesProgress?: boolean;
+    grabCursor?: boolean;
-    watchSlidesVisibility?: boolean;
+
+    // Touches
+    touchEventsTarget?: 'container' | 'wrapper';
+    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
+    preventIntercationOnTransition?: boolean;
+    allowSlidePrev?: boolean;
+    allowSlideNext?: boolean;
+    noSwiping?: boolean;
+    noSwipingClass?: string;
+    noSwipingSelector?: string;
+    swipeHandler?: string | HTMLElement;
+
+    // Clicks
+    preventClicks?: boolean;
+    preventClicksPropagation?: boolean;
+    slideToClickedSlide?: boolean;
 
     // Freemode
     freeMode?: boolean;
@@ -34,291 +264,195 @@ export interface SwiperOptions {
     freeModeMinimumVelocity?: number;
     freeModeSticky?: boolean;
 
-    // Effects
+    // Progress
-    effect?: string;
+    watchSlidesProgress?: boolean;
-    fade?: {};
+    watchSlidesVisibility?: boolean;
-    cube?: {};
-    coverflow?: {};
-    flip?: {};
-
-    // Parallax
-    parallax?: boolean;
-
-    // Slides grid
-    spaceBetween?: number;
-    slidesPerView?: number | string;
-    slidesPerColumn?: number;
-    slidesPerColumnFill?: string;
-    slidesPerGroup?: number;
-    centeredSlides?: boolean;
-    slidesOffsetBefore?: number;
-    slidesOffsetAfter?: number;
-
-    // Grab Cursor
-    grabCursor?: boolean;
-
-    // Touches
-    touchEventsTarget?: string;
-    touchRatio?: number;
-    touchAngle?: number;
-    simulateTouch?: boolean;
-    shortSwipes?: boolean;
-    longSwipes?: boolean;
-    longSwipesRatio?: number;
-    longSwipesMs?: number;
-    followFinger?: boolean;
-    onlyExternal?: boolean;
-    threshold?: number;
-    touchMoveStopPropagation?: boolean;
-    iOSEdgeSwipeDetection?: boolean;
-    iOSEdgeSwipeThreshold?: number;
-
-    // Touch Resistance
-    resistance?: boolean;
-    resistanceRatio?: number;
-
-    // Clicks
-    preventClicks?: boolean;
-    preventClicksPropagation?: boolean;
-    slideToClickedSlide?: boolean;
-
-    // Swiping / No swiping
-    allowSwipeToPrev?: boolean;
-    allowSwipeToNext?: boolean;
-    noSwiping?: boolean;
-    noSwipingClass?: string;
-    swipeHandler?: string | Element;
-
-    // Navigation Controls
-    uniqueNavElements?: boolean;
-
-    // Pagination
-    pagination?: string | Element;
-    paginationType?: string;
-    paginationHide?: boolean;
-    paginationClickable?: boolean;
-    paginationElement?: string;
-    paginationBulletRender?(swiper: Swiper, index: number, className: string): void;
-    paginationFractionRender?(swiper: Swiper, currentClassName: string, totalClassName: string): void;
-    paginationProgressRender?(swiper: Swiper, progressbarClass: string): void;
-    paginationCustomRender?(swiper: Swiper, current: number, total: number): void;
-
-    // Navigation Buttons
-    nextButton?: string | Element;
-    prevButton?: string | Element;
-
-    // Scollbar
-    scrollbar?: string | Element | SwiperScrollbarOptions;
-    scrollbarHide?: boolean;
-    scrollbarDraggable?: boolean;
-    scrollbarSnapOnRelease?: boolean;
-
-    // Accessibility
-    a11y?: boolean;
-    prevSlideMessage?: string;
-    nextSlideMessage?: string;
-    firstSlideMessage?: string;
-    lastSlideMessage?: string;
-    paginationBulletMessage?: string;
-
-    // Keyboard / Mousewheel
-    keyboardControl?: boolean;
-    mousewheelControl?: boolean;
-    mousewheelForceToAxis?: boolean;
-    mousewheelReleaseOnEdges?: boolean;
-    mousewheelInvert?: boolean;
-    mousewheelSensitivity?: number;
-
-    // Hash Navigation
-    hashnav?: boolean;
-    hashnavWatchState?: boolean;
-    history?: string;
 
     // Images
     preloadImages?: boolean;
     updateOnImagesReady?: boolean;
-    lazyLoading?: boolean;
-    lazyLoadingInPrevNext?: boolean;
-    lazyLoadingInPrevNextAmount?: number;
-    lazyLoadingOnTransitionStart?: boolean;
-
     // Loop
     loop?: boolean;
     loopAdditionalSlides?: number;
     loopedSlides?: number;
+    loopFillGroupWithBlank?: boolean;
 
-    zoom?: boolean;
+    // Breakpoints
-
+    breakpoints?: {
-    // Controller
+        // TODO: extract possible parameters for breakpoints to separate interface
-    control?: Swiper;
+        [index: number]: any;
-    controlInverse?: boolean;
+    };
-    controlBy?: string;
 
     // Observer
     observer?: boolean;
     observeParents?: boolean;
 
-    // Breakpoints
-    breakpoints?: {};
-
-    // Callbacks
-    runCallbacksOnInit?: boolean;
-    onInit?(swiper: Swiper): void;
-    onSlideChangeStart?(swiper: Swiper): void;
-    onSlideChangeEnd?(swiper: Swiper): void;
-    onSlideNextStart?(swiper: Swiper): void;
-    onSlideNextEnd?(swiper: Swiper): void;
-    onSlidePrevStart?(swiper: Swiper): void;
-    onSlidePrevEnd?(swiper: Swiper): void;
-    onTransitionStart?(swiper: Swiper): void;
-    onTransitionEnd?(swiper: Swiper): void;
-    onTouchStart?(swiper: Swiper, event: Event): void;
-    onTouchMove?(swiper: Swiper, event: Event): void;
-    onTouchMoveOpposite?(swiper: Swiper, event: Event): void;
-    onSliderMove?(swiper: Swiper, event: Event): void;
-    onTouchEnd?(swiper: Swiper, event: Event): void;
-    onClick?(swiper: Swiper, event: Event): void;
-    onTap?(swiper: Swiper, event: Event): void;
-    onDoubleTap?(swiper: Swiper, event: Event): void;
-    onImagesReady?(swiper: Swiper): void;
-    onProgress?(swiper: Swiper, progress: number): void;
-    onReachBeginning?(swiper: Swiper): void;
-    onReachEnd?(swiper: Swiper): void;
-    onDestroy?(swiper: Swiper): void;
-    onSetTranslate?(swiper: Swiper, translate: any): void;
-    onSetTransition?(swiper: Swiper, transition: any): void;
-    onAutoplay?(swiper: Swiper): void;
-    onAutoplayStart?(swiper: Swiper): void;
-    onAutoplayStop?(swiper: Swiper): void;
-    onLazyImageLoad?(swiper: Swiper, slide: any, image: any): void;
-    onLazyImageReady?(swiper: Swiper, slide: any, image: any): void;
-    onPaginationRendered?(swiper: Swiper, paginationContainer: any): void;
-
     // Namespace
+    containerModifierClass?: string;
     slideClass?: string;
     slideActiveClass?: string;
+    slideDuplicatedActiveClass?: string;
     slideVisibleClass?: string;
     slideDuplicateClass?: string;
     slideNextClass?: string;
+    slideDuplicatedNextClass?: string;
     slidePrevClass?: string;
+    slideDuplicatedPrevClass?: string;
     wrapperClass?: string;
-    bulletClass?: string;
+
-    bulletActiveClass?: string;
+    // Components
-    paginationHiddenClass?: string;
+    navigation?: NavigationOptions;
-    paginationCurrentClass?: string;
+    pagination?: PaginationOptions;
-    paginationTotalClass?: string;
+    scrollbar?: ScrollbarOptions;
-    paginationProgressbarClass?: string;
+    autoplay?: AutoplayOptions;
-    buttonDisabledClass?: string;
+    parallax?: boolean;
+    lazy?: LazyLoadingOptions | boolean;
+    fadeEffect?: FadeEffectOptions;
+    coverflowEffect?: CoverflowEffectOptions;
+    flipEffect?: FlipEffectOptions;
+    cubeEffect?: CubeEffectOptions;
+    zoom?: ZoomOptions | boolean;
+    keyboard?: KeyboardControlOptions | boolean;
+    mousewheel?: MouseWheelControlOptions | boolean;
+    virtual?: VirtualSlidesOptions;
+    hashNavigation?: HashNavigationOptions;
+    history?: HistoryNavigationOptions;
+    controller?: ControllerOptions;
+    a11y?: AccessibilityOptions;
 }
 
-interface SwiperScrollbarOptions {
+interface Navigation {
-    container: string;          // Default: '.swiper-scrollbar'
+    nextEl: HTMLElement;
-    draggable?: boolean;        // Default: true
+    prevEl: HTMLElement;
-    hide?: boolean;             // Default: true
+    update: () => void;
-    snapOnRelease?: boolean;    // Default: false
+}
+interface Pagination {
+    el: HTMLElement;
+    // TODO: dom7 like array
+    bullets: any[];
+
+    render: () => void;
+    update: () => void;
 }
 
-declare class SwiperSlide {
+interface Scrollbar {
-    append(): SwiperSlide;
+    eL: HTMLElement;
-    clone(): SwiperSlide;
+    dragEl: HTMLElement;
-    getWidth(): number;
+
-    getHeight(): number;
+    updateSize: () => void;
-    getOffset(): { top: number; left: number; };
+}
-    insertAfter(index: number): SwiperSlide;
+
-    prepend(): SwiperSlide;
+interface Autoplay {
-    remove(): void;
+    running: boolean;
+
+    start: () => void;
+    stop: () => void;
+}
+
+interface LazyLoading {
+    load: () => void;
+    loadInSlide: (index: number) => void;
+}
+
+interface Zoom {
+    enabled: boolean;
+    scale: number;
+
+    enable: () => void;
+    disable: () => void;
+    in: () => void;
+    out: () => void;
+    toggle: () => void;
+}
+
+// Keyboard and Mousewheel control
+interface Control {
+    enabled: boolean;
+
+    enable: () => void;
+    disable: () => void;
+}
+
+interface VirtualSlides {
+    cache: any;
+    from: number;
+    to: number;
+    slides: any[];
+
+    appendSlide: (slide: any) => void;
+    prependSlide: (slide: any) => void;
+    update: () => void;
+}
+
+interface Controller {
+    control: Swiper;
 }
 
 export declare class Swiper {
-    constructor(container: string | Element, options?: SwiperOptions);
+    constructor(container: string | Element, parameters?: SwiperOptions);
 
     // Properties
+    params: SwiperOptions;
+    // TODO: dom7 element
+    $el: any;
+    // TODO: dom7 element
+    $wrapperEl: any;
+    slides: HTMLElement[];
     width: number;
     height: number;
-    params: any;
+    translate: number;
-    positions: any;
+    progress: number;
-
-    // Feature detection
-    support: {
-        touch: boolean;
-        transforms: boolean;
-        transforms3d: boolean;
-        transitions: boolean;
-    };
-
-    // Browser detection
-    browser: {
-        ie8: boolean;
-        ie10: boolean;
-    };
-
-    // Navigation
     activeIndex: number;
-    activeLoopIndex: number;
+    realIndex: number;
-    activeLoaderIndex: number;
     previousIndex: number;
-    swipeNext(internal?: boolean): boolean;
+    isBeginning: boolean;
-    swipePrev(internal?: boolean): boolean;
+    isEnd: boolean;
-    swipeReset(): boolean;
+    animating: boolean;
-    swipeTo(index: number, speed?: number, runCallbacks?: boolean): boolean;
+    touches: {
-    activeSlide(): SwiperSlide;
+        startX: number;
-    updateActiveSlide(index: number): void;
+        startY: number;
-
+        currentX: number;
-    // Events
+        currentY: number;
-    touches: any;
+        diff: number;
-    isTouched: boolean;
-    clickedSlideIndex: number;
-    clickedSlide: SwiperSlide;
-    wrapperTransitionEnd(callback: () => void, permanent: boolean): void;
-
-    // Init/reset
-    destroy(deleteInstance: boolean, cleanupStyles: boolean): void;
-    reInit(forceCalcSlides?: boolean): void;
-    resizeFix(reInit?: boolean): void;
-
-    // Autoplaying
-    autoplay: boolean;
-    startAutoplay(): void;
-    stopAutoplay(): void;
-
-    // Other methods
-    getWrapperTranslate(axis: string): number;  // 'x' or 'y'
-    setWrapperTranslate(x: number, y: number, z: number): void;
-    setWrapperTransition(duration: any): void;
-
-    // Slides API
-
-    slides: SwiperSlide[];
-
-    slidePrev(runCallbacks?: boolean, speed?: number): void;
-    slideNext(runCallbacks?: boolean, speed?: number): void;
-    slideTo(index: number, speed?: number, runCallbacks?: boolean): void;
-    update(updateTranslate?: boolean): void;
-    onResize(): void;
-    detachEvents(): void;
-    attachEvents(): void;
-
-    appendSlide(slides: HTMLElement | string | string[]): void;
-    prependSlide(slides: HTMLElement | string | string[]): void;
-    removeSlide(slideIndex: number): void;
-    removeAllSlides(): void;
-
-    lockSwipeToNext(): void;
-    unlockSwipeToNext(): void;
-    lockSwipeToPrev(): void;
-    unlockSwipeToPrev(): void;
-    lockSwipes(): void;
-    unlockSwipes(): void;
-    disableMousewheelControl(): void;
-    enableMousewheelControl(): void;
-    disableKeyboardControl(): void;
-    enableKeyboardControl(): void;
-    disableTouchContro(): void;
-    enableTouchContro(): void;
-    unsetGrabCursor(): void;
-    setGrabCursor(): void;
-
-    plugins?: {
-        debugger?(swiper: any, params: any): void;
     };
+    clickedIndex: number;
+    clickedSlide: HTMLElement;
+    allowSlideNext: boolean;
+    allowSlidePrev: boolean;
+    allowTouchMove: boolean;
+
+    slideNext: (speed?: number, runCallbacks?: boolean) => void;
+    slidePrev: (speed?: number, runCallbacks?: boolean) => void;
+    slideTo: (index: number, speed?: number, runCallbacks?: boolean) => void;
+    slideToLoop: (index: number, speed?: number, runCallbacks?: boolean) => void;
+    slideReset: (speed?: number, runCallbacks?: boolean) => void;
+    slideToClosest: (speed?: number, runCallbacks?: boolean) => void;
+    updateAutoHeight: (speed?: number) => void;
+    update: () => void;
+    detachEvents: () => void;
+    attachEvents: () => void;
+    destroy: (deleteInstance?: boolean, cleanStyles?: boolean) => void;
+    appendSlide: (slides: Array<(HTMLElement | string)> | string | HTMLElement) => void;
+    prependSlide: (slides: Array<(HTMLElement | string)> | string | HTMLElement) => void;
+    removeSlide: (index: number) => void;
+    removeAllSlides: () => void;
+    setTranslate: (translate: number) => void;
+    getTranslate: () => void;
+    on: (event: SwiperEvent, handler: () => void) => void;
+    once: (event: SwiperEvent, handler: () => void) => void;
+    off: (event: SwiperEvent, handler?: () => void) => void;
+    unsetGrabCursor: () => void;
+    setGrabCursor: () => void;
+
+    // components
+    navigation: Navigation;
+    pagination: Pagination;
+    scrollbar: Scrollbar;
+    autoplay: Autoplay;
+    zoom: Zoom;
+    keyboard: Control;
+    mousewheel: Control;
+    virtual: VirtualSlides;
+    controller: Controller;
 }
+