How to dynamically change the contents by swiping left and right

Ionic Framework ionic-v3
1

Hi,
I’m developing a app to view different articles . In this i needed to change the article by swipe. Each article has different urls to be called.

My html:

<ion-content padding (swipe)="swipeEvent($event)">
   <div *ngIf="article">
	 <h2 [innerHTML]="article.title"></h2>
	 <strong [innerHTML]="article.teaser"></strong>
	 <span [innerHTML]="article.description" [class.larger]="larger"></span>
   </div>
</ion-content>

my ts function:

getArticle(id){
		this.http.get(this.constants.api_article + id).map(res => res.json()).subscribe(article => {
			this.article = article.output;	
		});
}
swipeEvent(e) {
	console.log(e);
	var swipe :any;
	this.storage.get("ArticleId").then((value) => {
		this.ArticleID = value;
		swipe = this.ArticleID.indexOf(this.article_inner.article_id);
		if(e.direction == 2){
			swipe = swipe +1;
			this.getArticle(this.ArticleID[swipe]);
		}
		else if(e.direction == 4){
			swipe = swipe -1;
			this.getArticle(this.ArticleID[swipe]);			
		}	
	})
}

If a click a article and swipe left it will show the next article,and it we again swipe left it won’t. Same if I swipe rigth. The swiping will effect only for the clicked article and not the viewing article.

Any suggestion is appreciable.
Thanks,

2

Why not using a slider to solve your function?

Instead of just a swipe event it comes with a nice animation, which could be a nicer user experience…but just an idea

3

Hi @reedrichards,
Thanks for the fast response.
Even if slider is used the issue is not solved. It could only navigate to the next and previous articles,of the one selected article, and not to the next and previous of the currently viewing article.

4

I’ve no idea what that mean sorry I won’t be able to help, hope someone does. Good luck