Ionic 2 - Slider - 显示第二张幻灯片项目的一部分

Question

我想展示第二个幻灯片项目的一部分,但不知道该怎么做.这是我到目前为止(基本的离子幻灯片):

<ion-slides pager >
            <ion-slide>
              <h2>Slide 1</h2>
            </ion-slide>

            <ion-slide>
              <h2>Slide 2</h2>
            </ion-slide>

            <ion-slide>
              <h2>Slide 3</h2>
            </ion-slide>
</ion-slides>

这就是我想要的方式:

我试图将离子滑片的宽度改为小于100%,但是第二张和第三张幻灯片只是从屏幕左侧进一步向左移动.

谁能帮我 ？

Answer 1

我想你明白了.此解决方案适用于仍在搜索此视图的其他人.只需在ion-slides标签中添加即可.

slidesPerView="1.5" spaceBetween="10"

Answer 2

在UX中,用户最好知道他是否有更多要查看的项目,特别是当我们不打算使用寻呼机时.

ion-slides在内部使用http://www.idangero.us/swiper/这可以帮助我们实现这一目标.

我们可以用 slidesPerView="2" spaceBetween="250"

您必须spaceBetween根据项目幻灯片大小优化值.

最后,你需要一个空ion-slide的,因为spaceBetween在定位上有点乱.

.card {
    width: 300px;
}

<ion-slides slidesPerView="2" spaceBetween="250">
    <ion-slide *ngFor="let foo of bars">
        <my-item class="card"></my-item>
    </ion-slide>
    <ion-slide>
        <!-- need a empty slide to avoid last item to be inaccessible -->
    </ion-slide>
</ion-slides>