I am facing a similar issue with this problem, but with a different twist. I want to showcase three results in ion-slide, and while iDangero Swipper seems like a solution, I believe ion-slide could also achieve something similar to this. Please take a look at the code snippet below;
home.ts:
books: Array<any>;
getBookDB(event, key) {
this._httpService.getBook().subscribe(
data => {
this.books = data = data.results;
console.log(data);
},
err => {
console.log(err);
}
);
}
itemTapped(event, book){
this.navCtrl.push(DetailPage, {
book: book
});
}
service provider:
apikey: string = "XXX";
getBook() {
var url = 'http://localhost:9000/findAll/BookApis/' + this.apikey;
var response = this._http.get(url).map(res => res.json());
return response;
}
and my ionic slide:
<ion-slides>
<ion-slide *ngFor="let book of books; let i = index" (click)="itemTapped($event, book)">
<ion-thumbnail item-left>
<img src="{{book.imgUrl}}">
</ion-thumbnail>
<h2>{{book.title}}</h2>
<h3>{{book.author}}</h3>
<p>{{book.category}}</p>
<button ion-button clear item-right>View</button>
</ion-slide>
</ion-slides>