Swappable card is not working with Ion Slide in IOS device

[Ghayyas]

Hello Dear Angular2-swing, Im having issue with this plugin as its working awesome in web browser as well as android device. But Im having issue in IOS Devices.

In IOS devices cards not are swipe correctly with Ion slide. But Outside ion slide its working fine.. let share the code here..

     <div *ngFor="let i of cards;trackBy:trackByCards; let index=index;">
        <ion-card id="myswingCard" swing-card  class="card-index"  [style.zIndex]="-1+i" [style.marginTop]="i===0?'0px':'12px'"> <!--id="myswingCard" swing-card  class="card-index"  [style.zIndex]="-1+i" [style.marginTop]="i===0?'0px':'12px'"-->
            <ion-card-content padding id="card-c">
                <!-- <div> -->  <!-- (ionSlideTap)="changeSlide()" swing-card [autoplay]="4000" [loop]="true" speed="1000"-->
                <!-- <div>
                    {{ i.property_images| json }}
                </div>   -->
                  <ion-slides pager (click)="changeSlide(index)"> 
                      <div *ngIf="overlayisHidden" (tap)="removeDummy()" style="position: absolute;
                      z-index: 99999;">  
                          <div class="overLayer"></div>
                  
                      <!-- <img src="assets/imgs/popup.png" alt="tutorial Screen"> -->
                        <img class="swipe-left-text"src="assets/imgs/swipe-left-text.png" alt="tutorial imgs">
                        <img class="swipe-left" src="assets/imgs/swipe-left0.png" alt="tutorial imgs">
                        <img class="dotted-lines" src="assets/imgs/dotted-lines.png" alt="tutorial imgs">
                        <img class="swipe-right-text"src="assets/imgs/swipe-right-text.png" alt="tutorial imgs">
                        <img class="swipe-right"src="assets/imgs/swipe-right.png" alt="tutorial imgs">
                        <img class="click-view" src="assets/imgs/click-view-1.png" alt="tutorial imgs">
                  
                  
                  
                        </div>
                      <img src="assets/imgs/dummy-img.jpg" *ngIf="i.images.length == '0'" style="height: 57vh;">

                    <ion-slide  *ngFor="let images of i.images">

                          <!-- <p>abc</p> -->
                          <div class="backward" (click)="slideMoveBack(index)"></div>
                          <div class="forward" (click)="slideMoveFor(index)"></div>
                          <img src="{{images.images}}" class="fade-in" (load)="imageloaded()" [ngClass]="{'img-loaded':loaded}" [hidden]="!loaded" *ngIf="images.images" />
                          <img src="assets/imgs/dummy-img.jpg" class="fade-in" [ngClass]="{'center':true}" *ngIf="!loaded" alt="" srcset="">
                          <!-- <ion-spinner [ngClass]="{'center':true}" *ngIf="!loaded"></ion-spinner> -->
                          <!-- <img class="img-class" src="{{images.images || 'assets/imgs/dummy-img.jpg'}}" onerror="this.src='assets/imgs/dummy-img.jpg'"> -->
                        </ion-slide> 
                         <!-- <ion-slide>
                            <div class="backward" (click)="slideMoveBack(index)"></div>
                            <div class="forward" (click)="slideMoveFor(index)"></div>
                          <img onerror="error" class="img-class" src="assets/imgs/slid2.jpg" alt="">
                        </ion-slide>
                        <ion-slide>
                            <div class="backward" (click)="slideMoveBack(index)"></div>
                            <div class="forward" (click)="slideMoveFor(index)"></div>
                            <img onerror="error" class="img-class" src="assets/imgs/slid3.jpg" alt="">
                        </ion-slide> -->
                       </ion-slides>
                    

                      <div class="card-l" (tap)='goNext(i)'>

                        <div class="div-h2">

                            <h2 class="card-h2">{{i.property_name}} </h2>
                            <ion-icon style="font-size: 1.0em; position: absolute;
                            bottom: 7vh;
                            right: 2vh;" name="information-circle">
                              </ion-icon>
                            
                            <p class="card-p"> &euro; {{i.amount}}</p>
                        </div>

                   </div>
                <!-- </div> -->

                <div class="card-b">
                  <ion-row> 
                      <ion-col class="padding-top-22"> 
                          <span>{{i.no_of_bedrooms}} 
                          </span> 
                             <img class="card-img" src="assets/icon/sleeping-bed.svg" alt="">

                          
                        </ion-col>
                        <ion-col class="padding-top-22"> 
                          <span>{{i.no_of_bathrooms}}</span> 
                          <img class="card-img" src="assets/icon/bathtub.svg" alt="">
                        </ion-col>
                    <ion-col></ion-col>
                    <ion-col padding (click)="voteUp(false,i.property_id)">
                        <ion-icon name="trash"></ion-icon>
                    </ion-col>
                    <ion-col padding (click)="voteUp(true,i.property_id)">
                      <ion-icon name="heart" color="danger"></ion-icon>
                    </ion-col>
                  </ion-row>
                </div>
            </ion-card-content>
        </ion-card>
        <div text-center class="index">
          <br>
          <p>{{currentIndex}}/{{total_data_length}}</p>
          </div>
    </div>

[KhalidWaleed88]

I have same issue. Its working smoothly in IOS devices. Some times it get stuck and some time it work. Can anyone help here?