Question

在“离子幻灯片”中设计下一个和上一个按钮时，这两个按钮会自动放置在“滑动包装”类中。需要使其在“ swiper-wrapper”类之外，以便可以从任何幻灯片中看到它。有什么解决办法吗？

<ion-slides pager="false" #mySlider>
  <ion-slide>1</ion-slide>
  <ion-slide>2</ion-slide>
  <ion-slide>3</ion-slide>
  <ion-slide>4</ion-slide>
  <ion-button class="slide-prev-btn"><ion-icon name="chevron-back" (click)="swipeNext()"></ion-icon></ion-button>
  <ion-button class="slide-next-btn"><ion-icon name="chevron-forward" (click)="swipePrev()"></ion-icon></ion-button>
</ion-slides>

Answer 1

我通过使用位置和两行代码来做到这一点

<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

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

下一个上一个导航按钮实现中的Ionic 5滑块

1 个答案: