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

在用户体验中，用户最好知道他是否有更多要查看的内容，特别是当我们不打算使用寻呼机时。

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 3

在与这个问题搏斗之后，我找到了一个非常直接的解决方案，似乎有效。

<ion-slides spaceBetween="-18">

显然，调整数量以符合您的特定需求。

Answer 4

我将slidePerView设置为＆＃39; auto＆＃39;并为每张幻灯片赋予-18px的右边距和18px的左边距（第一个和最后一个，其中边距左边和边距右边都设置了）。

这是模板代码：

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

我得到了解决方案，

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

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>

Answer 7

从Ionic 3开始，你可以使用 slidesPerView="2.5" spaceBetween="10"标记中的ion-slides，slidesPerView可以包含带有单个十进制数字的任何十进制值。相应调整。

Answer 8

我设法在ionic3中获得了此视图。很简单的。您所需要做的就是先设置slidesPerView= "auto"，然后设置

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

see the view

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

8 个答案: