離子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 - 滑塊 - 顯示第二滑項目

回答

相關問題