Ionic 2 - 滑块 - 显示第二个幻灯片项目的一部分

Question

我想显示第二个幻灯片项目的一部分，但不知道该怎么做。这是我目前所拥有的（基本的 Ionic 幻灯片）：

<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

在 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>

Answer 2

在解决了这个问题之后，我找到了一个似乎可行的非常简单的解决方案。

<ion-slides spaceBetween="-18">

显然，调整数量以满足您的特定需求。

Answer 3

我将 slidesPerView 设置为 'auto' 并为每张幻灯片设置了 -18px 的 margin-right 和 18px 的 margin-left（除了第一张和最后一张，其中的 margin -left 和 margin-right 已设置）。

模板代码如下：

 <ion-slides [slidesPerView]="'auto'">
     <ion-slide *ngFor="...">
         ...
     </ion-slide>
 </ion-slides>

这里是 css:

  ion-slide {
    width: 240px !important;
    height: 290px !important;

    margin-right: -18px;
    margin-left: 18px
  }

  ion-slide:first-child {
    margin-left: 0;
  }

  ion-slide:last-child {
    margin-right: 0;
  }

Answer 4

编辑：- 对于 Ionic 5 在 TS 文件中设置选项。

slideOpts = {
  slidesPerView: 1.5,
  spaceBetween: 10 
};

对于Ionic 3

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

slidesPerView="1.5" spaceBetween="10"

Answer 5

从 Ionic 3 开始，您可以使用 slidesPerView="2.5" spaceBetween="10" 在 ion-slides 标签中，slidesPerView 可以有任何具有单个小数位的十进制值。相应调整。

Answer 6

我得到了解决方案，

    <ion-slides pager="false" slidesPerView="1.2" spaceBetween="10" centeredSlides=true loop=true>

  <ion-slide>
    <h1 class="card">1</h1>
  </ion-slide>

  <ion-slide>
    <h1 class="card">2</h1>
  </ion-slide>

  <ion-slide>
    <h1 class="card">3</h1>
  </ion-slide>

</ion-slides>

Answer 7

我设法在 ionic3 中获得了这个视图。很简单的。您只需要设置 slidesPerView= "auto" 然后在您的 sass

ion-slide {
        width:80% !important;
        margin-top: 0px;}

Answer 8

IONIC 5

对于类似类型的场景：

.ts

 slideOpts = {
    initialSlide: 1,
    speed: 400,
    slidesPerView: 1.2,
    spaceBetween: 10,
    centeredSlides: true
};

.html

<ion-slides [options]="slideOpts">
        <ion-slide>
          <img src="https://via.placeholder.com/300x200" alt="" class="slider-img">
        </ion-slide>
        <ion-slide>
          <img src="https://via.placeholder.com/300x200" alt="" class="slider-img">
        </ion-slide>
        <ion-slide>
          <img src="https://via.placeholder.com/300x200" alt="" class="slider-img">
        </ion-slide>
    </ion-slides>

Ionic 2 - 滑块 - 显示第二个幻灯片项目的一部分

Ionic 2 - Slider - show part of second slide item

angular

ionic-framework

ionic2

ion-slide-box