Display the left and right arrow of a slider


#1

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

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();
  }

#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