Display the left and right arrow of a slider

Ionic Framework
1

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

I mean these:

15
Capture d’écran 2018-10-11 à 12.25.15.png2300×840 11.4 KB

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

I have added

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

but doesn’t seems to be enough

2

i do this by using position and two line code :wink::sweat_smile:

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
3

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

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

Thx for the quick feedback

1 Like
4

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

5

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