cards stack using angular2 swing module in ionic 3 - css

Question

I'm using angular2 swing in ionic in order make swiping cards. So after building, I'm getting cards one below one not in the stack format(as they get in tinder). Can someone help me in figuring it out. why are the cards are not in stack format? Here is my code.
<div swing-stack #myswing1 [stackConfig]="stackConfig" (throwoutleft)="voteUp(false)" (throwoutright)="voteUp(true)" id="card-stack" >
<ion-card #mycards1 swing-card *ngFor="let job of jdetails">
<div >
<img src="assets/imgs/lap.jpg" (click)="openPage()" id="tagimg">
<div class="textoncard title" >{{ job.company }}</div>
<div class="textoncard subt">{{ job.jobtitle }}</div>
<div class="textoncard time">2 days ago</div>
</div>
<ion-card-content>
<table>
<tr>
<td class="label">Location</td>
<td class="des">{{ job.location }}</td>
</tr>
<tr>
<td class="label">Type</td>
<td class="des">{{ job.jobtype }}</td>
</tr>
<tr>
<td class="label">salary</td>
<td class="des">{{ job.jobtype }}</td>
</tr>
<tr>
<td class="label">Description</td>
<td class="des">{{ job.jobdescrition }}</td>
</tr>
<tr>
<td class="label">Source</td>
<td class="des"><p style="color: purple;font-weight: bold;">Monster</p></td>
</tr>
</table>
<div id="endbtn">
<ion-buttons class="ionrow">
<button ion-button icon-only clear (tap)="tapEvent($event)" [ngStyle]="{'color': buttonColor}">
<ion-icon name="ios-heart"></ion-icon>
</button>
<button ion-button icon-only clear style="color: black" id="sharebtn">
<i class="fas fa fa-share-alt custom-share"></i>
</button>
</ion-buttons>
</div>
</ion-card-content>
</ion-card>
</div>
Here is ts file
export class FeedsPage {
#ViewChild('myswing1') swingStack: SwingStackComponent;
#ViewChildren('mycards1') swingCards: QueryList<SwingCardComponent>;
stackConfig: StackConfig;
recentCard: string = '';
cards: Array<any>;
buttonColor: string = '#F2F0F4';
public press: number = 0;
jobtitletosave: string;
showdropdown: boolean = false;
searchQuery: string = '';
items: string[];
jdetails: any;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public modalCtrl: ModalController,
private nativePageTransitions: NativePageTransitions,
public jobdetail: JobsDataProvider
)
{
this.stackConfig = {
throwOutConfidence: (offsetX, offsetY, element: any) => {
return Math.min(Math.abs(offsetX) / (element.offsetWidth/2), 1);
},
transform: (element, x, y, r) => {
this.onItemMove(element, x, y, r);
},
throwOutDistance: (d) => {
return 800;
}
};
this.initializeItems();
}
ionViewDidLoad() {
console.log('ionViewDidLoad FeedsPage');
this.jobdetail.getJobDetails().then((data) => {
console.log(data);
this.jdetails = data;
});
}
openPage() {
let options: NativeTransitionOptions = {
direction: 'down',
duration: 100,
slowdownfactor: -1,
iosdelay: 50,
androiddelay: 50,
}
this.nativePageTransitions.fade(options);
this.navCtrl.push(JobDetailPage);
}
showAlert() {
let modal = this.modalCtrl.create(ModalPage);
modal.present();
}
ngAfterViewInit() {
// Either subscribe in controller or set in HTML
this.swingStack.throwin.subscribe((event: DragEvent) => {
event.target.style.background = '#ffffff';
});
}
onItemMove(element, x, y, r) {
let color = '';
const abs = Math.abs(x);
const min = Math.trunc(Math.min(16 * 16 - abs, 16 * 16));
const hexCode = this.decimalToHex(min, 2);
if (x > 0) {
color = '#' + hexCode + 'FF' + hexCode;
} else {
color = '#FF' + hexCode + hexCode;
}
element.style.background = color;
element.style['transform'] = `translate3d(0, 0, 0) translate(${x}px, ${y}px) rotate(${r}deg)`;
}
decimalToHex(d, padding) {
let hex = Number(d).toString(16);
const numPadding = typeof (padding) === 'undefined' || padding === null ? 2 : padding;
while (hex.length < numPadding) {
hex = '0' + hex;
}
return hex;
}
voteUp(like: boolean) {
}
tapEvent(e) {
this.press++;
if (this.press % 2 != 0 ) {
this.buttonColor = '#E24B4B';
}
else {
this.buttonColor = '#F2F0F4';
}
}
}
I want the cards
here is how I'm getting tem I want them as