带有 left/right 个箭头的滑块

Question

你能告诉我如何为 Ionic 滑块组件创建 right/left 箭头吗？

注意：请参阅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>

Answer 1

您可以创建两个按钮。

后退按钮：

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

带有 left/right 个箭头的滑块

Slider with left/right arrows

css

typescript

swiper

ionic3

angular