イオン2 - スライダーは - 私は第2のスライドアイテムの一部を表示する第2のスライドアイテム

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％未満ですが、2番目と3番目のスライドは画面からさらに左に移動します。

誰でも手伝ってもらえますか？ UXでは

Answer 1

、彼が私たちがポケットベルを使用する予定がない場合は特に、参照するにはより多くのアイテムを持っているかどうかを知るために、ユーザーのためのより良いです。

ion-slidesは内部http://www.idangero.us/swiper/を使用し、これはそれを達成するために私たちを助けることがあります。

私たちは、あなたがあなたの商品のスライドサイズに応じspaceBetween値を調整する必要がslidesPerView="2" spaceBetween="250"

を使用することができます。

最後に、spaceBetweenは位置を少し混乱させるので、最後に空のion-slideが必要です。

.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の余白 - 余白と18pxの余白 - を与えた良い結果がいくつかありました（最初と最後を除き、余白 - 左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

私はあなたがそれを得ると思います。まだこのビューを探している他の人のためのこの解決策。これをion-slidesタグに追加するだけです。

slidesPerView="1.5" spaceBetween="10"