fix(slides): expose interface to provide custom animations (#17959)

fixes #16616

Co-Authored-By: CFT-Chris <mail@chrislo.ca>

Author: liamdebeasi

core/src/components/slides/readme.md

@@ -313,7 +313,7 @@ export class Slides implements ComponentInterface {
     // Base options, can be changed
     // TODO Add interface SwiperOptions
     const swiperOptions: SwiperOptions = {
-      effect: 'slide',
+      effect: undefined,
       direction: 'horizontal',
       initialSlide: 0,
       loop: false,
@@ -438,8 +438,13 @@ export class Slides implements ComponentInterface {
       }
     };
 
+    const customEvents = (!!this.options && !!this.options.on) ? this.options.on : {};
+
+    // merge "on" event listeners, while giving our event listeners priority
+    const mergedEventOptions = { on: { ...customEvents, ...eventOptions.on } };
+
     // Merge the base, user options, and events together then pas to swiper
-    return { ...swiperOptions, ...this.options, ...eventOptions };
+    return { ...swiperOptions, ...this.options, ...mergedEventOptions };
   }
 
   hostData() {

core/src/components/slides/slides.tsx

@@ -24,13 +24,13 @@
     <ion-content id="content">
       <ion-slides style="background: black" id="slides" pager>
         <ion-slide style="background: rgb(0, 200, 0); color: white;">
-          <img src="http://lorempixel.com/400/200/cats/">
+          <img src="image/cat.jpeg">
         </ion-slide>
         <ion-slide style="background: white; color: blue;">
-          <img src="http://lorempixel.com/400/200/cats/">
+          <img src="image/cat.jpeg">
         </ion-slide>
         <ion-slide style="background: blue; color: white;">
-          <img src="http://lorempixel.com/400/200/cats/">
+          <img src="image/cat.jpeg">
         </ion-slide>
       </ion-slides>
       <ion-button expand="block" onclick="slidePrev()">Slide Prev</ion-button>

core/src/components/slides/test/image/cat.jpeg

@@ -18,8 +18,10 @@ import { Component } from '@angular/core';
   `
 })
 export class SlideExample {
+  // Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
   slideOpts = {
-    effect: 'flip'
+    initialSlide: 1,
+    speed: 400
   };
   constructor() {}
 }

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

@@ -17,7 +17,10 @@
 
 ```javascript
 var slides = document.querySelector('ion-slides');
+
+// Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
 slides.options = {
-  effect: 'flip'
+  initialSlide: 1,
+  speed: 400
 }
 ```

core/src/components/slides/usage/angular.md

@@ -3,8 +3,10 @@ import React from 'react';
 
 import { IonSlides, IonSlide } from '@ionic/react';
 
+// Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
 const slideOpts = {
-  effect: 'flip'
+  initialSlide: 1,
+  speed: 400
 };
 
 const Example: React.SFC<{}> = () => (

core/src/components/slides/usage/javascript.md

@@ -19,8 +19,10 @@
 
   @Component()
   export default class SelectExample extends Vue {
+    // Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
     slideOpts = {
-      effect: 'flip'
+      initialSlide: 1,
+      speed: 400
     };
   }
 </script>