你能告诉我如何为 Ionic slider 组件创建右/左箭头吗?
演示: Stackblitz
注:请看home.html
页
.html
<ion-slides [pager]="true" [slidesPerView]="2">
<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>
最佳答案
您可以创建两个按钮。
<button (click)="this.Slides.slidePrev()" class="backBtn">
<ion-icon name="arrow-back"></ion-icon>
</button>
<button (click)="this.Slides.slideNext()" class="nextBtn">
<ion-icon name="arrow-forward">
</ion-icon> </button>
注:这只是一个
pseudo code
(click)="this.Slides.slidePrev()"
然后你需要用你的css定位它们,你应该很高兴:)
CSS:
.backBtn{
position: absolute;
left: 20vw;
top: 40vh;
width: 15vw;
height: 15vw;
border-radius: 50%;
border: none;
background: red;
}
.nextBtn{
position: absolute;
right: 20vw;
top: 40vh;
width: 15vw;
height: 15vw;
border-radius: 50%;
border: none;
background: green;
}
关于css - 带左/右箭头的 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48597303/