# Display the left and right arrow of a slider

Anyone knows how to display the left and right arrow of a slider?

I mean these:

Like in the example: http://idangero.us/swiper/demos/200-infinite-loop.html

nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}

but doesn’t seems to be enough

i do this by using position and two line code

html file

<div style="position: absolute;top: 50%;left: 16px;font-size: 25px;z-index: 2;" (click)="slidePrev()">
<ion-icon name="arrow-back"></ion-icon>
</div>
<div style="position: absolute;top: 50%;right: 16px;font-size: 25px;z-index: 2;" (click)="slideNext()">
<ion-icon name="arrow-forward"></ion-icon>
</div>
<ion-slides paginationType="bullets" slidesPerView="1" pager="true">
<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>

ts file

@ViewChild(Slides) slides: Slides;
slidePrev() {
this.slides.slidePrev();
}
slideNext() {
this.slides.slideNext();
}
1 Like

Hahaha you know what? Seeing your answer where you say “i do this by…” reminds me … I do it too already in my app

I’m trying to add these arrows in another kind of project

Thx for the quick feedback

1 Like

this left-right arrow is also sliding with the image. I want that arrow to be fixed on the slider. any suggestion?

I don’t think in the above code that issues will occur. If you put that arrows within the slider then those arrows slide with the slider.

1 Like