Swappable card is not working with Ion Slide in IOS device #52
Description
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"> € {{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>