web-dev-qa-db-ja.com

Ionic 2-スライダー-2番目のスライドアイテムの一部を表示

2番目のスライドアイテムの一部を表示したいのですが、その方法がわかりません。これは私がこれまでに持っているものです（基本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>

そしてこれが私が望む方法です： enter image description here

イオンスライドの幅を100％未満に変更しようとしましたが、2番目と3番目のスライドが画面の外でさらに左に移動します。

誰かが私を助けることができますか？

angularionic-frameworkionic2ion-slide-box
9
Christer

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

slidesPerView="1.5" spaceBetween="10"
20
Ajoy Karmakar

UXでは、特にページャーを使用する予定がない場合は、表示するアイテムがもっとあるかどうかをユーザーが知っておくとよいでしょう。

_ion-slides_内部で使用 http://www.idangero.us/swiper/ これは私たちがそれを達成するのに役立つかもしれません。

_slidesPerView="2" spaceBetween="250"_を使用できます

アイテムのスライドサイズに応じて、spaceBetweenの値を調整する必要があります。

最後に、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>
_
6
Diego Cubissimo

この問題に取り組んだ後、私はうまくいくように見える非常に簡単な解決策を見つけました。

<ion-slides spaceBetween="-18">

もちろん、特定のニーズに合わせて数を調整してください。

4
user4650164

私は解決策を得ました、

    <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>
2
Upendra

SlidesPerViewを「auto」に設定し、各スライドにマージン右-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;
  }
2
David Bulté

私は、ionic3でこのビューを取得することができました。それは朝飯前だ。必要なのはslidesPerView= "auto"を設定してからsassに設定することです

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

see the view

0
Mahmoud Fathy

Ionic 3から、slidesPerView="2.5" spaceBetween="10"タグでion-slidesを使用できます。slidesPerViewは1桁の10進数で任意の10進値を持つことができます。それに応じて調整してください。

0
Himalaya Ahuja