Hi, I have a slider and I’d like to add the Swiper navigation arrows to it, but Ionic doesn’t seem to have that option. Swiper can initialize with arrows like this…
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
…but I’m not sure how to implement this in Ionic. Can someone give me some direction or tell me an elegant way to add this? Cheers.
You need to import these first
import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';
Call this in your class
@ViewChild('slides') slides: Slides;
The slides reference your ion-slides on your page html
<ion-slides #slides>
<ion-slide>
</ion-slide>
<ion-slide>
</ion-slide>
<button type="submit" float-left ion-button color="primary" class="btnPrev" (click)="prev()">Prev</button>
<button type="submit" float-right ion-button color="primary" class="btnNext" (click)="next()">Next</button>
</ion-slides>
Add these methods
next() {
this.slides.slideNext();
}
prev() {
this.slides.slidePrev();
}
And there you go. Hope this helps
Thanks a lot! That’s awesome!
I actually just figured it out with the below…
<div class="swiper-button-next" (click)="nextSlide()"></div>
...
nextSlide() {
this.slides.slideNext();
}
I already have it working, but I’ll try it out with your code, since it is probably more standard. Cheers.
The bigger issue is that you put a click directly on a div. If you do this, you need to include the tappable directive
<div tappable (click)="foo">
or you can get performance issues., The code of @Shequeri had clicks only where they were expected. In theory, you can make anything clickable. In practice, I’ve tried not to surprise Ionic too often.
Good to know. Thanks!
I implemented it. There was a little issue with the buttons not being in the proper location. They were behind the slides. Adding class="swiper-button-next" puts them into the right location, so you can use that to find out what else you need to add to the your class. Hope this helps anyone else with the same issue. Cheers.
thanks it helped me.
Thanks so much dude, you save my day 
Hi Shequeri, thank you for your suggestion and example. It has helped me make some progress here. The problem I am running into is that when the swiper-button is clicked, the swiper buttons move with the first slide and disappear. Here is my html markup:
<!-- Generated template for the HomePageCarouselComponent component -->
<ion-slides #slides class="slides-container">
<ion-slide class="slide-page-one">
(...)
</ion-slide>
<ion-slide class="slide-page-two">
(...)
</ion-slide>
<button type="submit" ion-button color="light" class="swiper-button-prev swiper-button-black" (click)="prevSlide()"></button>
<button type="submit" ion-button color="light" class="swiper-button-next swiper-button-black" (click)="nextSlide()"></button>
</ion-slides>
What I noticed in Chrome Dev Tools is that when Ionic builds out the html, it places the buttons inside of the “swiper-wrapper” class element. When I manually move the button elements to be inside the parent element of “swiper-wrapper”, in this case, “swiper-container” (also automatically generated), I get the desired behaviour. That is, the buttons remain on page as you navigate through the slides. I can’t find any documentation that relates to this issue.
While I was continuing to work on it I managed to create a fix for the issue. Here is my html:
<!-- Generated template for the HomePageCarouselComponent component -->
<div class="slides-container">
<ion-slides #slides>
<ion-slide class="slide-page-one">
(...)
</ion-slide>
<ion-slide class="slide-page-two">
(...)
</ion-slide>
</ion-slides>
<button type="submit" ion-button color="light" class="swiper-button-prev swiper-button-black" (click)="prevSlide()"></button>
<button type="submit" ion-button color="light" class="swiper-button-next swiper-button-black" (click)="nextSlide()"></button>
</div>
Basically I wrapped the whole thing in a div, and placed the buttons outside the <ion-slides> element. Not sure how the implementation suggested by Shequeri was supposed to work.
Good to know you managed to fix that. Practically that will be what I will suggest if I was to answer earlier. To be honest, I dont understand this part of your post “Not sure how the implementation suggested by Shequeri was supposed to work.”
I meant I wasn’t certain if the behaviour of the buttons moving with the slide was expected or not.
How to hide previous icon from first slide and next icon from the last slide… Please help me
Check out the doc:
There are isEnd() and isBeginning() methods for ion-slides.
I’d suggest just disabling the nav arrows instead of hiding them though.
<ion-slides #slides>
(...)
</ion-slides>
<button ion-button [disable]="slides.isBeginning()">(...)</button>
<button ion-button [disable]="slides.isEnd()">(...)</button>
Thank you very much! Elegant code 
@Shequeri, thanks for the code you provided but I cannot seem to get it to work for my project. I keep getting the error that Cannot read property of 'next' of undefined
I have used your following TypeScript code in my file like so:
import { Component, ViewChild } from ‘@angular/core’;
import { IonicPage, NavController, NavParams, Slides } from ‘ionic-angular’;
@IonicPage()
@Component({
selector: 'page-details',
templateUrl: 'details.html',
})
export class DetailsPage {
category: any;
data: any = {};
@ViewChild('slides') slides: Slides;
constructor(
public navCtrl: NavController,
public navParams: NavParams
) { }
ionViewDidLoad() {
this.data = this.navParams.get('data');
this.category = (this.navParams.get('category'));
}
goBack(){
this.navCtrl.pop();
}
nextSlide() {
this.slides.slideNext();
}
prevSlide() {
this.slides.slidePrev();
}
}
HTML code is fine and also the functions callback, but it just doesn’t recognise the declared ‘Slides’ property. Obviously I have declared it wrong but I cannot seem to figure it out.
Could you share the {}.html file code please.
Sure:
<ion-col col-6 padding>
<span class="swipe-to-change">Swipe to change the images</span>
<ion-slides pager>
<ion-slide *ngIf="data.video">
<video controls poster="../../assets/imgs/{{category | slug}}/{{data.video}}-poster.jpg">
<source src="../../assets/imgs/{{category | slug}}/{{data.video}}.mp4" type="video/mp4">
</video>
</ion-slide>
<ion-slide *ngFor="let image of data.featured_image">
<img src="../../assets/imgs/{{category | slug}}/{{image}}.jpg" class="featured-image"/>
</ion-slide>
</ion-slides>
<button type="submit" float-left ion-button color="primary" class="btnPrev" (click)="slidePrev()">Prev</button>
<button type="submit" float-right ion-button color="primary" class="btnNext" (click)="nextSlide()">Next</button>
</ion-col>
Mind that this is just the specific section from the HTML template. I can include the whole page if need be.
You created a reference for the ion-slides but you didn’t reference it on your {}.html file
@ViewChild('slides') slides: Slides;
Your ion-slides tag should look like this
<ion-slides pager #slides>
<ion-slide>
.............
..............
</ion-slide>
</ion-slides>
Hope this work out for you. Cheers!