离子2 - 滑块 - 显示第二滑项目

的一部分，我想说明的第二滑项目的组成部分，但不知道该怎么做。这是我迄今为止（碱性离子幻灯片）：离子2 - 滑块 - 显示第二滑项目

<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％，但第二和第三幻灯片只是获取进一步向左移动，移出屏幕。

任何人都可以帮助我吗？

来源

2017-01-30 Christer

在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-17 12:56:51

但你怎么能使其成为最后一张幻灯片的右边都有没有间隔，因此港岛线在vieuw –

slidesperview被赋予完整的下一张幻灯片在当前一个适合正确。如何只显示下一张幻灯片的一部分？ @diego –

经过这个问题的摔角后，我发现了一个非常简单的解决方案，似乎工作。

<ion-slides spaceBetween="-18">

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

来源

2017-05-15 20:14:49 user4650164

我觉得这是一个非常糟糕的解决方案。迭戈的建议绝对会更好，当然这是正确的方法。该问题的解决方案称为slidesPerView。如果你想，你可以使用当然空间另外 – peter70

我有一些很好的效果设置slidesPerView为“自动”，并给予每张幻灯片-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; 
    }

来源

2017-06-22 20:26:41

好工作先生。感谢 – frogcoder

我觉得你得到它。这个解决方案适用于那些仍在寻找这个视图的其他人。只需在离子切片标签中加入。

slidesPerView="1.5" spaceBetween="10"

来源

2017-08-28 11:27:30

这的确是最完美的解决方案！ – Rob

根本真棒:) –

离子2 - 滑块 - 显示第二滑项目

回答

相关问题