Could you tell me how can I create right/left arrows for the Ionic slider component?
Demo: Stackblitz
Note: please see the home.html
page
.html
<ion-slides [pager]="true" [slidesPerView]="2">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
You can create two buttons.
<button (click)="this.Slides.slidePrev()" class="backBtn">
<ion-icon name="arrow-back"></ion-icon>
</button>
<button (click)="this.Slides.slideNext()" class="nextBtn">
<ion-icon name="arrow-forward">
</ion-icon> </button>
Note: This is just a pseudo code
(click)="this.Slides.slidePrev()"
You'll then need to position them with your css and you should be good to go :)
CSS:
.backBtn{
position: absolute;
left: 20vw;
top: 40vh;
width: 15vw;
height: 15vw;
border-radius: 50%;
border: none;
background: red;
}
.nextBtn{
position: absolute;
right: 20vw;
top: 40vh;
width: 15vw;
height: 15vw;
border-radius: 50%;
border: none;
background: green;
}