离子 5 滑块下一个上一个导航按钮实现

Question

在"离子幻灯片"中设计下一个和上一个按钮时，这两个按钮会自动放置在"滑动包装"类中。 需要将其置于"滑动包装器"类之外，以便从任何幻灯片中都可以看到它。有什么解决方案吗？

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