Issues with ionic slides

I have an issue with the slides

Originally my mark up was

<div id="slide-container">            
<ion-slides autoplay="3000" loop="true" effect="fade">                
<ion-slide *ngFor="let  g of sponsorGraphicsArr">
    <div *ngIf="g['iphone5GraphicURL'] && !'tablet')" class="home-bg" [style.backgroundImage]="'url(' + serverName + g['iphone5GraphicURL'] + ')' | safe: 'style'" id="background-image"></div>
    <div *ngIf="g['ipadProGraphicURL'] &&'tablet')" class="home-bg" [style.backgroundImage]="'url(' + serverName + g['ipadProGraphicURL'] + ')' | safe: 'style'" id="background-image"></div>

The last slide would play twice in the loop.

(Also the second slide would pass very quickly).

Then I tried disabling the input parameters and doing it in the controller.

            setTimeout(() => { 
    public async loopSlider() {
    let i = 0;
    while (i <= this.sponsorGraphicsArr.length) {
       await new Promise<void>(resolve => {
           setTimeout(resolve, this.sliderDelay);

    public changeSlide(): void {
          if(this.slides.isEnd()) {
                this.slides.slideTo(0, 300)

This works better than the slider out of the box in that it doesn’t play the last slide twice and all the slides are evenly timed. However there is no fade effect for slideTo and slideNext.

If the first issue can be solved this would be good if not I may abandon using this plugin in favour of something custom. Any help appreciated.

Turns out I needed to put effect as an input so

and it works.

I am still using the custom script to slide next because out of the box it has the initial problem.