带左/右箭头的滑块

Posted 2023-03-06

【中文标题】带左/右箭头的滑块

【英文标题】：Slider with left/right arrows

【发布时间】：2018-07-13 19:37:33

【问题描述】：

您能告诉我如何为 Ionic 滑块组件创建右/左箭头吗？

演示： 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>

【问题讨论】：

为什么投反对票？该问题包括一个演示项目，该问题可以在其中重现，还包括所需输出的图像......它已被标记为“太宽泛”，但似乎也不是那种问题。

是的，真的很沮丧。但我很高兴，因为我得到了解决方案以及您的评论。谢谢@sebaferreras :)

【参考方案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;

【讨论】：

是的，但是 CSS 部分是棘手的部分 :( 上面的 Stackblitz 有什么帮助吗？

我刚刚为你添加了一些 CSS :)

非常感谢您的大力支持:)