slide images, get from server, in ion-card (load one at a time)

Question

I'm working with ionic 3. I've more than 750 mobile images in db. I'm getting one image at a time to show in ion-card in ion-slides. I want next image when i swipe to next and same with the previous image. I tried to get mobile Ids and then i created an array and initialized it upto this mobile Id.

constructor(
    public navParams: NavParams,
    private backend: BackendProvider
  ){
    console.log('id get from list', navParams.data); //this is the id of current mobile image.

    this.phoneId = navParams.data;
    for(let index = 0; index <= navParams.data; index++)
      this.idArray[index] = index; //initializing array here.
    console.log('id arrays', this.idArray);
  }

ngOnInit()
  {
    //@params: getMobilesData(limit, searchtype => id, id => in string)
    this.backend.getMobilesData(1, 'id', this.phoneId.toString()).then((res) =>
    {
      console.log('phone details on init', this.phoneId);

      this.slides.slideTo(this.phoneId); // moved to required slide using id
      this.mobile = JSON.parse(res.data).data[0]; //here the data with image
      console.log(this.mobile);

      this.isLoading = false;
    }).catch((error) =>
    {
      console.error(error);
    });
  }

Here's html file

//here using ionSlideDidChange event
<ion-slides (ionSlideDidChange)="slideChanged($event)" cancelable=false>
    <ion-slide *ngFor="let id of idArray> //iteraing in array
      <ion-spinner *ngIf="isLoading" name="ripple"></ion-spinner>
      <ion-card *ngIf="!isLoading">
//Here mobileImagesURL => request url
//id => id from IdArray
//mobile.thumbnail => mobile image
        <img class="set-img" [src]="mobileImagesURL + id + '/' + mobile.thumbnail">
        <ion-card-content>
          <ion-card-title>
            {{mobile.name}}
          </ion-card-title>
        </ion-card-content>
      </ion-card>
    </ion-slide>
  </ion-slides>

So that if I swipe to previous *ion-slide**. I'll get data using mobile id.

When I swipe to next ion-slide I push the mobile id first in array in (ionSlideDidChange) event to increase th size of array then send request for the mobile image.

slideChanged(event)
  {
    console.log('slide change event in getimage', event);
    if(event.swipeDirection == 'next')
    {
      //increasing phoneId and pushing in idArray.
      this.phoneId++;
      this.idArray.push(this.this.phoneId);
      console.log('pushing mobile id', this.phoneId);

    }
    else if(event.swipeDirection == 'prev')
      this.phoneId--; // decreasing it if 
    console.log('id array', this.idArray);

    this.backend.getMobilesData(1, 'id', this.idArray[this.phoneId].toString()).then((res) =>
    {
      if(JSON.parse(res.data).totalCount != 0)
      {
        this.mobile = JSON.parse(res.data).data[0];
        console.log('current mobile data', this.mobile);
        console.log('current mobile id', this.idArray[this.phoneId]);
        this.isLoading = false;
      }
      else
      {
        this.phoneId++;
        this.noData = true;
        this.slides.slideNext();
        this.noData = false;
        this.slideChanged(event);
      }
    }).catch((error) =>
    {
      console.error(error);
    });
  }[![here's the image][1]][1]

It causes 2 problems:

First: I can't skip iteration in ngFor if mobile id is missing in db. because ngFor doesn't allow that. I tried to use custom Pipe. But i don't have good grip on Pipes.

Second: When I swipe ion-slides it updates the array with mobile id. But it have to swipe twice to changes the ion-slide.

I need solutions to my both problems... If anyone have some other suggestions, i'll be thankful to him/her.

i hope i cleared myself. If anything i missed here or you don't understand my requirement fully. Kindly notify me.