Skip to content
Permalink
Browse files

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

fixes #16616

Co-Authored-By: CFT-Chris <mail@chrislo.ca>
  • Loading branch information...
liamdebeasi and CFT-Chris committed Apr 16, 2019
1 parent 18b347b commit 447497427ed012a5b459138678fa7236fc8e11ae

Large diffs are not rendered by default.

@@ -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() {
Binary file not shown.
@@ -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>
@@ -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() {}
}
@@ -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
}
```
@@ -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<{}> = () => (
@@ -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>

0 comments on commit 4474974

Please sign in to comment.
You can’t perform that action at this time.