chore(slides): refactor

* chore(): refactor

* chore(): make slide options dynamic

packages/core/src/components.d.ts

@@ -40,6 +40,9 @@ import {
 import {
   SelectPopoverOption,
 } from './components/select-popover/select-popover';
+import {
+  SwiperOptions,
+} from './components/slides/vendor/swiper';
 
 import {
   ActionSheetController as IonActionSheetController
@@ -2626,20 +2629,8 @@ declare global {
   }
   namespace JSXElements {
     export interface IonSlidesAttributes extends HTMLAttributes {
-      autoplay?: number;
+      options?: SwiperOptions;
-      control?: any;
-      direction?: 'horizontal' | 'vertical';
-      effect?: string;
-      initialSlide?: number;
-      keyboardControl?: boolean;
-      loop?: boolean;
       pager?: boolean;
-      paginationType?: string;
-      parallax?: boolean;
-      slidesPerView?: number | 'auto';
-      spaceBetween?: number;
-      speed?: number;
-      zoom?: boolean;
     }
   }
 }

packages/core/src/components/popover/popover.tsx

@@ -116,7 +116,7 @@ export class Popover {
       .then((mountingData) => {
         this.usersComponentElement = mountingData.element;
         return domControllerAsync(this.dom.raf, () => { })
-        .then(() => this.animationCtrl.create(animationBuilder, this.el, this.ev))
+        .then(() => this.animationCtrl.create(animationBuilder, this.el, this.ev));
       })
       .then((animation) => {
         this.animation = animation;

packages/core/src/components/slides/readme.md

@@ -24,146 +24,36 @@ Licensed under MIT
 
 ## Properties
 
-#### autoplay
+#### options
-
-number
-
-
-#### control
 
 any
 
-
+Options to pass to the swiper instance.
-#### direction
+See http://idangero.us/swiper/api/ for valid options
-
-any
-
-
-#### effect
-
-string
-
-
-#### initialSlide
-
-number
-
-
-#### keyboardControl
-
-boolean
-
-
-#### loop
-
-boolean
 
 
 #### pager
 
 boolean
 
-
+Show or hide the pager
-#### paginationType
-
-string
-
-
-#### parallax
-
-boolean
-
-
-#### slidesPerView
-
-any
-
-
-#### spaceBetween
-
-number
-
-
-#### speed
-
-number
-
-
-#### zoom
-
-boolean
 
 
 ## Attributes
 
-#### autoplay
+#### options
-
-number
-
-
-#### control
 
 any
 
-
+Options to pass to the swiper instance.
-#### direction
+See http://idangero.us/swiper/api/ for valid options
-
-any
-
-
-#### effect
-
-string
-
-
-#### initialSlide
-
-number
-
-
-#### keyboardControl
-
-boolean
-
-
-#### loop
-
-boolean
 
 
 #### pager
 
 boolean
 
-
+Show or hide the pager
-#### paginationType
-
-string
-
-
-#### parallax
-
-boolean
-
-
-#### slidesPerView
-
-any
-
-
-#### spaceBetween
-
-number
-
-
-#### speed
-
-number
-
-
-#### zoom
-
-boolean
 
 
 ## Events
@@ -207,6 +97,79 @@ boolean
 #### ionSlideWillChange
 
 
+## Methods
+
+#### getActiveIndex()
+
+Get the index of the active slide.
+
+
+#### getPreviousIndex()
+
+Get the index of the previous slide.
+
+
+#### isBeginning()
+
+Get whether or not the current slide is the first slide.
+
+
+#### isEnd()
+
+Get whether or not the current slide is the last slide.
+
+
+#### length()
+
+Get the total number of slides.
+
+
+#### lockSwipeToNext()
+
+Lock or unlock the ability to slide to the next slides.
+
+
+#### lockSwipeToPrev()
+
+Lock or unlock the ability to slide to the previous slides.
+
+
+#### lockSwipes()
+
+Lock or unlock the ability to slide to change slides.
+
+
+#### slideNext()
+
+Transition to the next slide.
+
+
+#### slidePrev()
+
+Transition to the previous slide.
+
+
+#### slideTo()
+
+Transition to the specified slide.
+
+
+#### startAutoplay()
+
+Start auto play.
+
+
+#### stopAutoplay()
+
+Stop auto play.
+
+
+#### update()
+
+Update the underlying slider implementation. Call this if you've added or removed
+child slides.
+
+
 
 ----------------------------------------------
 

packages/core/src/components/slides/slides.tsx

@@ -1,6 +1,6 @@
-import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, Method, Prop, PropDidChange } from '@stencil/core';
 import { Swiper } from './vendor/swiper.js';
-
+import { SwiperOptions } from './vendor/swiper';
 
 @Component({
   tag: 'ion-slides',
@@ -8,9 +8,16 @@ import { Swiper } from './vendor/swiper.js';
   assetsDir: 'vendor'
 })
 export class Slides {
-  swiper: any;
-  @Element() private el: HTMLElement;
 
+  private container: HTMLElement;
+  private init: boolean;
+  private tmr: number;
+  private swiper: any;
+  private finalOptions: any;
+  private slidesId: number;
+  private slideId: string;
+
+  @Element() private el: HTMLElement;
 
   /**
    * @output {Event} Emitted before the active slide has changed.
@@ -78,178 +85,78 @@ export class Slides {
   @Event() ionSlideTouchEnd: EventEmitter;
 
   /**
-   * @input {string} The animation effect of the slides.
+   * Options to pass to the swiper instance.
-   * Possible values are: `slide`, `fade`, `cube`, `coverflow` or `flip`.
+   * See http://idangero.us/swiper/api/ for valid options
-   * Default: `slide`.
    */
-  @Prop() effect: string = 'slide';
+  @Prop() options:  SwiperOptions;
+
+  @PropDidChange('options')
+  updateSwiperOptions() {
+    let newOptions = this.normalizeOptions();
+    this.swiper.params = Object.assign({}, this.swiper.params, newOptions);
+    this.update();
+  }
 
   /**
-   * @input {number} Delay between transitions (in milliseconds). If this
+   * Show or hide the pager
-   * parameter is not passed, autoplay is disabled. Default does
-   * not have a value and does not autoplay.
-   * Default: `null`.
    */
-  @Prop() autoplay: number;
+  @Prop() pager: boolean = true;
-
-  /**
-   * @input {Slides} Pass another Slides instance or array of Slides instances
-   * that should be controlled by this Slides instance.
-   * Default: `null`.
-   */
-  @Prop() control: any = null;
-
-  /**
-   * @input {string}  Swipe direction: 'horizontal' or 'vertical'.
-   * Default: `horizontal`.
-   */
-  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';
-
-  /**
-   * @input {number}  Index number of initial slide. Default: `0`.
-   */
-  @Prop() initialSlide: number = 0;
-
-  /**
-   * @input {boolean} If true, continuously loop from the last slide to the
-   * first slide.
-   */
-  @Prop() loop: boolean = false;
-
-  /**
-   * @input {boolean}  If true, show the pager.
-   */
-  @Prop() pager: boolean;
-
-  /**
-   * @input {string}  Type of pagination. Possible values are:
-   * `bullets`, `fraction`, `progress`. Default: `bullets`.
-   * (Note that the pager will not show unless `pager` input
-   * is set to true).
-   */
-  @Prop() paginationType: string = 'bullets';
-
-
-  /**
-   * @input {boolean} If true, allows you to use "parallaxed" elements inside of
-   * slider.
-   */
-  @Prop() parallax: boolean = false;
-
-  /**
-   * @input {number} Slides per view. Slides visible at the same time. Default: `1`.
-   */
-  @Prop() slidesPerView: number | 'auto' = 1;
-
-  /**
-   * @input {number} Distance between slides in px. Default: `0`.
-   */
-  @Prop() spaceBetween: number = 0;
-
-  /**
-   * @input {number} Duration of transition between slides
-   * (in milliseconds). Default: `300`.
-   */
-  @Prop() speed: number = 300;
-
-
-  /**
-   * @input {boolean} If true, enables zooming functionality.
-   */
-  @Prop() zoom: boolean;
-
-  /**
-   * @input {boolean} If true, enables keyboard control
-   */
-  @Prop() keyboardControl: boolean;
-
 
   render() {
     return (
       <div class='swiper-container' data-dir='rtl'>
         <div class='swiper-wrapper'>
-          <slot></slot>
+          <slot />
         </div>
-        <div class={{
+        <div
-          'swiper-pagination': true,
+          class={{
-          'hide': !this.pager
+            'swiper-pagination': true,
-        }}></div>
+            hide: !this.pager
+          }}
+        />
       </div>
     );
   }
 
-  /**
+  constructor() {
-   * Height of container.
-   */
-  private height: number;
-
-  /**
-   * Width of container.
-   */
-  private width: number;
-
-  /**
-   * Enabled this option and swiper will be operated as usual except it will
-   * not move, real translate values on wrapper will not be set. Useful when
-   * you may need to create custom slide transition.
-   */
-  private virtualTranslate = false;
-
-  /**
-   * Set to true to round values of slides width and height to prevent blurry
-   * texts on usual resolution screens (if you have such)
-   */
-  private roundLengths = false;
-
-  // Slides grid
-
-  private originalEvent: any;
-
-  /**
-   * Private properties only useful to this class.
-   * ------------------------------------
-   */
-  private _init: boolean;
-  private _tmr: number;
-
-  /**
-   * Properties that are exposed publicly but no docs.
-   * ------------------------------------
-   */
-  private container: HTMLElement;
-  private slidesId: number;
-  private slideId: string;
-
-
-  constructor(
-  ) {
     this.slidesId = ++slidesId;
     this.slideId = 'slides-' + this.slidesId;
   }
 
-  private _initSlides() {
+  private initSlides() {
-    if (!this._init) {
+    if (!this.init) {
       console.debug(`ion-slides, init`);
 
       this.container = this.el.children[0] as HTMLElement;
 
+      // init swiper core
+      this.swiper = new Swiper(this.container, this.normalizeOptions());
+
+      if (this.options.keyboardControl) {
+        // init keyboard event listeners
+        this.enableKeyboardControl(true);
+      }
+
+      this.init = true;
+    }
+  }
+
+  normalizeOptions() {
+      // Base options, can be changed
       var swiperOptions = {
-        height: this.height,
+        effect: 'slide',
-        width: this.width,
+        autoplay: 0,
-        virtualTranslate: this.virtualTranslate,
+        direction: 'horizontal',
-        roundLengths: this.roundLengths,
+        initialSlide: 0,
-        originalEvent: this.originalEvent,
+        loop: false,
-        autoplay: this.autoplay,
+        pager: false,
-        direction: this.direction,
+        pagination: '.swiper-pagination',
-        initialSlide: this.initialSlide,
+        paginationType: 'bullets',
-        loop: this.loop,
+        parallax: false,
-        pager: this.pager,
+        slidesPerView: 1,
-        paginationType: this.paginationType,
+        spaceBetween: 0,
-        parallax: this.parallax,
+        speed: 300,
-        slidesPerView: this.slidesPerView,
+        zoom: false,
-        spaceBetween: this.spaceBetween,
-        speed: this.speed,
-        zoom: this.zoom,
         slidesPerColumn: 1,
         slidesPerColumnFill: 'column',
         slidesPerGroup: 1,
@@ -324,7 +231,12 @@ export class Slides {
         prevSlideMessage: 'Previous slide',
         nextSlideMessage: 'Next slide',
         firstSlideMessage: 'This is the first slide',
-        lastSlideMessage: 'This is the last slide',
+        lastSlideMessage: 'This is the last slide'
+      };
+
+      // Keep the event options separate, we dont want users
+      // overwriting these
+      var eventOptions = {
         onSlideChangeStart: this.ionSlideWillChange.emit,
         onSlideChangeEnd: this.ionSlideDidChange.emit,
         onSlideNextStart: this.ionSlideNextStart.emit,
@@ -337,19 +249,17 @@ export class Slides {
         onReachBeginning: this.ionSlideReachStart.emit,
         onReachEnd: this.ionSlideReachEnd.emit,
         onTouchStart: this.ionSlideTouchStart.emit,
-        onTouchEnd: this.ionSlideTouchEnd.emit,
+        onTouchEnd: this.ionSlideTouchEnd.emit
       };
 
-      // init swiper core
+      // Merge the base, user options, and events together then pas to swiper
-      this.swiper = new Swiper(this.container, swiperOptions);
+      return Object.assign(
+        {},
+        swiperOptions,
+        this.options,
+        eventOptions
+      );
 
-      if (this.keyboardControl) {
-        // init keyboard event listeners
-        this.enableKeyboardControl(true);
-      }
-
-      this._init = true;
-    }
   }
 
   componentDidLoad() {
@@ -358,7 +268,7 @@ export class Slides {
      * child components are ready.
      */
     setTimeout(() => {
-      this._initSlides();
+      this.initSlides();
     }, 10);
   }
 
@@ -366,18 +276,20 @@ export class Slides {
    * Update the underlying slider implementation. Call this if you've added or removed
    * child slides.
    */
+  @Method()
   update(debounce = 300) {
-    if (this._init) {
+    this.swiper.update();
-      window.clearTimeout(this._tmr);
+    // if (this.init) {
-      this._tmr = window.setTimeout(() => {
+    //   window.clearTimeout(this.tmr);
-        this.swiper.update();
+    //   this.tmr = window.setTimeout(() => {
-
+    //     this.swiper.update();
-        // Don't allow pager to show with > 10 slides
+    //
-        if (this.length() > 10) {
+    //     // Don't allow pager to show with > 10 slides
-          this.paginationType = undefined;
+    //     if (this.length() > 10) {
-        }
+    //       this.options.paginationType = undefined;
-      }, debounce);
+    //     }
-    }
+    //   }, debounce);
+    // }
   }
 
   /**
@@ -387,6 +299,7 @@ export class Slides {
    * @param {number} [speed]  Transition duration (in ms).
    * @param {boolean} [runCallbacks] Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true.
    */
+  @Method()
   slideTo(index: number, speed?: number, runCallbacks?: boolean) {
     this.swiper.slideTo(index, speed, runCallbacks);
   }
@@ -397,6 +310,7 @@ export class Slides {
    * @param {number} [speed]  Transition duration (in ms).
    * @param {boolean} [runCallbacks]  Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true.
    */
+  @Method()
   slideNext(speed?: number, runCallbacks?: boolean) {
     this.swiper.slideNext(runCallbacks, speed);
   }
@@ -407,6 +321,7 @@ export class Slides {
    * @param {number} [speed]  Transition duration (in ms).
    * @param {boolean} [runCallbacks]  Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true.
    */
+  @Method()
   slidePrev(speed?: number, runCallbacks?: boolean) {
     this.swiper.slidePrev(runCallbacks, speed);
   }
@@ -416,6 +331,7 @@ export class Slides {
    *
    * @returns {number} The index number of the current slide.
    */
+  @Method()
   getActiveIndex(): number {
     return this.swiper.activeIndex;
   }
@@ -425,6 +341,7 @@ export class Slides {
    *
    * @returns {number} The index number of the previous slide.
    */
+  @Method()
   getPreviousIndex(): number {
     return this.swiper.previousIndex;
   }
@@ -434,6 +351,7 @@ export class Slides {
    *
    * @returns {number} The total number of slides.
    */
+  @Method()
   length(): number {
     return this.swiper.slides.length;
   }
@@ -443,8 +361,9 @@ export class Slides {
    *
    * @returns {boolean} If the slide is the last slide or not.
    */
+  @Method()
   isEnd(): boolean {
-    return this.isEnd();
+    return this.swiper.isEnd;
   }
 
   /**
@@ -452,27 +371,31 @@ export class Slides {
    *
    * @returns {boolean} If the slide is the first slide or not.
    */
+  @Method()
   isBeginning(): boolean {
-    return this.isBeginning();
+    return this.swiper.isBeginning;
   }
 
   /**
    * Start auto play.
    */
-  startAutoplay() {
+  @Method()
+  startAutoplay(speed?: number): void {
     this.swiper.startAutoplay();
   }
 
   /**
    * Stop auto play.
    */
-  stopAutoplay() {
+  @Method()
+  stopAutoplay(): void {
     this.swiper.stopAutoplay();
   }
 
   /**
    * Lock or unlock the ability to slide to the next slides.
    */
+  @Method()
   lockSwipeToNext(shouldLockSwipeToNext: boolean) {
     if (shouldLockSwipeToNext) {
       return this.swiper.lockSwipeToNext();
@@ -483,6 +406,7 @@ export class Slides {
   /**
    * Lock or unlock the ability to slide to the previous slides.
    */
+  @Method()
   lockSwipeToPrev(shouldLockSwipeToPrev: boolean) {
     if (shouldLockSwipeToPrev) {
       return this.swiper.lockSwipeToPrev();
@@ -493,6 +417,7 @@ export class Slides {
   /**
    * Lock or unlock the ability to slide to change slides.
    */
+  @Method()
   lockSwipes(shouldLockSwipes: boolean) {
     if (shouldLockSwipes) {
       return this.swiper.lockSwipes();
@@ -510,8 +435,11 @@ export class Slides {
     this.swiper.disableKeyboardControl();
   }
 
+  /**
+   * @hidden
+   */
   componentDidUnload() {
-    this._init = false;
+    this.init = false;
 
     this.swiper.destroy(true, true);
     this.enableKeyboardControl(false);

packages/core/src/components/slides/test/app-intro/index.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Slides - App Intro</title>
+
+  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+
+  <style>
+    .scroll-inner,
+    .slides,
+    .swiper-container {
+      height: 100%;
+    }
+
+    .swiper-slide {
+      display: flex;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .swiper-slide img {
+      max-width: 300px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-page>
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button onclick="slidePrev()">Prev</ion-button>
+          </ion-buttons>
+          <ion-buttons slot="end">
+            <ion-button onclick="slideNext()">Next</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-slides class="slides">
+
+          <ion-slide>
+            <img src="https://images.unsplash.com/photo-1490718687940-0ecadf414600?auto=format&fit=crop&w=1352&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="slide-image" />
+            <div padding>
+              <h2 class="slide-title">
+                Welcome to <b>ICA</b>
+              </h2>
+              <p>
+                The <b>ionic conference app</b> is a practical preview of the ionic framework in action, and a demonstration of proper code use.
+              </p>
+            </div>
+          </ion-slide>
+
+          <ion-slide>
+            <img src="https://images.unsplash.com/photo-1504703500545-4c4ee081b155?auto=format&fit=crop&w=1350&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="slide-image" />
+            <div padding>
+              <h2 class="slide-title">What is Ionic?</h2>
+              <p><b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.</p>
+            </div>
+          </ion-slide>
+
+          <ion-slide>
+            <img src="https://images.unsplash.com/photo-1501879779179-4576bae71d8d?auto=format&fit=crop&w=1350&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="slide-image" />
+            <div padding>
+              <h2 class="slide-title">What is Ionic Pro?</h2>
+              <p><b>Ionic Pro</b> is a powerful set of services and features built on top of Ionic Framework that brings a totally new level of app development agility to mobile dev teams.</p>
+            </div>
+          </ion-slide>
+
+          <ion-slide>
+            <img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=1350&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="slide-image" />
+            <ion-button onclick="toStart()">
+              Back to the start
+            </ion-button>
+          </ion-slide>
+        </ion-slides>
+      </ion-content>
+    </ion-page>
+  </ion-app>
+  <script>
+    const slides = document.querySelector('.slides')
+    slides.pager = true;
+
+    function slideNext() {
+      slides.slideNext()
+    };
+
+    function slidePrev() {
+      slides.slidePrev();
+    };
+
+    function toStart() {
+      slides.slideTo(0);
+    }
+  </script>
+</body>
+
+</html>

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

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html dir="ltr">
+
 <head>
   <meta charset="UTF-8">
   <title>Slides - Basic</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <script src="/dist/ionic.js"></script>
 </head>
 
@@ -11,7 +13,7 @@
   <ion-app>
     <ion-page>
       <ion-content>
-        <ion-slides style="background: black" pager="true" effect="flip">
+        <ion-slides style="background: black" id="slides">
           <ion-slide style="background: red; color: white;">
             <h1>Slide 1</h1>
           </ion-slide>
@@ -22,8 +24,113 @@
             <h1>Slide 3</h1>
           </ion-slide>
         </ion-slides>
+        <ion-button expand="block" onclick="slidePrev()">Slide Prev</ion-button>
+        <ion-button expand="block" onclick="slideNext()">Slide Next</ion-button>
+        <ion-button expand="block" onclick="getActiveIndex()">Get Active Index</ion-button>
+        <ion-button expand="block" onclick="getPreviousIndex()">Get Previous Index</ion-button>
+
+        <ion-button expand="block" onclick="isEnd()">Is the End?</ion-button>
+        <ion-button expand="block" onclick="isBeginning()">Is the beginning?</ion-button>
+
+        <ion-button expand="block" onclick="slideTo()">Slide to slide index 2</ion-button>
+        <ion-button expand="block" onclick="slideLength()">Get slide length</ion-button>
+        <ion-button expand="block" onclick="slideAutoPlay()">Start auto play</ion-button>
+        <ion-button expand="block" onclick="slideStopAutoPlay()">Stop auto play</ion-button>
+        <ion-button expand="block" onclick="setOptions()">Set options</ion-button>
       </ion-content>
     </ion-page>
   </ion-app>
+  <script>
+    const slides = document.getElementById('slides')
+    slides.pager = false;
+    slides.options = {}
+
+    function slideNext() {
+      slides.slideNext(500)
+    };
+
+    function slidePrev() {
+      slides.slidePrev(500);
+    };
+
+    function slideTo() {
+      slides.slideTo(2);
+    }
+
+    function slideAutoPlay() {
+      slides.options = Object.assign({}, slides.options, {autoplay: 300});
+      slides.startAutoplay();
+    }
+
+    function slideStopAutoPlay() {
+      slides.stopAutoplay();
+    }
+
+    function setOptions() {
+      slides.options = Object.assign({}, slides.options, {
+        slidesPerView: 2,
+      });
+    }
+
+    function slideLength() {
+      console.log(slides.length());
+    }
+
+    function getActiveIndex() {
+      console.log(slides.getActiveIndex());
+    };
+
+    function getPreviousIndex() {
+      console.log(slides.getPreviousIndex());
+    };
+
+    function isEnd() {
+      console.log(slides.isEnd());
+    }
+
+    function isBeginning() {
+      console.log(slides.isBeginning());
+    }
+    slides.addEventListener('ionSlideDidChange', function(e) {
+      console.log('slide did change', e)
+    });
+    slides.addEventListener('ionSlideWillChange', function(e) {
+      console.log('slide will change', e)
+    });
+    slides.addEventListener('ionSlideNextStart', function(e) {
+      console.log('slide next start', e)
+    });
+    slides.addEventListener('ionSlidePrevStart', function(e) {
+      console.log('slide prev start', e)
+    });
+    slides.addEventListener('ionSlideNextEnd', function(e) {
+      console.log('slide next end', e)
+    });
+    slides.addEventListener('ionSlidePrevEnd', function(e) {
+      console.log('slide prev end', e)
+    });
+    slides.addEventListener('ionSlideTransitionStart', function(e) {
+      console.log('slide transition start', e)
+    });
+    slides.addEventListener('ionSlideTransitionEnd', function(e) {
+      console.log('slide transistion end', e)
+    });
+    slides.addEventListener('ionSlideDrag', function(e) {
+      console.log('slide drag', e)
+    });
+    slides.addEventListener('ionSlideReachStart', function(e) {
+      console.log('slide reach start', e)
+    });
+    slides.addEventListener('ionSlideReachEnd', function(e) {
+      console.log('slide reach end', e)
+    });
+    slides.addEventListener('ionSlideTouchStart', function(e) {
+      console.log('slide touch start', e)
+    });
+    slides.addEventListener('ionSlideTouchEnd', function(e) {
+      console.log('slide touch end', e)
+    });
+  </script>
 </body>
+
 </html>

packages/core/src/components/slides/test/standalone/index.html

@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <ion-slides style="background: black" pager="true" effect="flip">
+  <ion-slides style="background: black" pager="true">
 
     <ion-slide style="background: red; color: white;">
       <h1>Slide 1</h1>
@@ -24,5 +24,12 @@
     </ion-slide>
 
   </ion-slides>
+  <script>
+    var slides = document.getElementsByTagName('ion-slides');
+    slides[0].options = {
+      effect: 'flip'
+    }
+  </script>
 </body>
+
 </html>

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

@@ -3,7 +3,7 @@
 // Definitions by: Sebastián Galiano <https://github.com/sgaliano/>, Luca Trazzi <https://github.com/lucax88x/>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
-interface SwiperOptions {
+export interface SwiperOptions {
     initialSlide?: number;
     direction?: string;
     speed?: number;