9

我想展示第二个幻灯片项目的一部分，但不知道该怎么做。这是我到目前为止所拥有的（基本的 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%，但第二张和第三张幻灯片只是向左移动，离开了屏幕。

谁能帮我 ？

4

8 回答 8

27

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

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

对于离子 3

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

slidesPerView="1.5" spaceBetween="10"
于 2017-08-28T11:27:30.237 回答
6

在 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>
于 2017-02-17T12:56:51.893 回答
4

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

<ion-slides spaceBetween="-18">

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

于 2017-05-15T20:14:49.470 回答
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;
  }
于 2017-06-22T20:26:41.067 回答
3

我得到了解决方案，

    <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>
于 2018-06-15T12:05:05.150 回答
1

离子 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>
于 2020-06-18T15:52:29.463 回答
0

我设法在ionic3中获得了这个观点。很简单的。您所需要的只是slidesPerView= "auto"在您的 sass中设置

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

看风景

于 2018-10-23T12:17:52.133 回答
0

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

于 2018-03-21T11:17:46.120 回答