web-dev-qa-db-ja.com

イオンスライドにページャードットを表示ionic component

ionic 2アプリのページ内にスライダーコンポーネントを作成しようとしています。ページャードットが表示されないことを除いて、意図したとおりに機能します。ページャーの使用方法に関するドキュメントはすばらしいものではありません。

    <div class="slider-container">
            <ion-slides pager="true">
                <ion-slide>
                    <div class="slide">
                        <img src='assets/image/scoping.png' />
                        <p class="slide-title">TITLE 1</p>
                        <p class="slide-text">Body text 1</p>
                    </div>
                </ion-slide>
                <ion-slide>
                    <div class="slide">
                        <img src='assets/image/projectmgmt.png' />
                        <p class="slide-title">TITLE 2</p>
                        <p class="slide-text">Body text 2</p>
                    </div>
                </ion-slide>
                <ion-slide>
                    <div class="slide">
                        <img src='assets/image/satisfaction.png' />
                        <p class="slide-title">TITLE 3</p>
                        <p class="slide-text">Body text 3</p>
                    </div>
                </ion-slide>
            </ion-slides>
    </div>

私も試しました<ion-slides options="{pagination: true}">および<ion-slides pager="true">とこれらのどちらも機能していません。

編集：ブラウザで確認すると、次のようなdivコンテナでページャーがレンダリングされているのがわかります：<div class="swiper-pager hide">したがって、ページャを再表示するために適切なパラメータを使用していません。またはバグがあります。 Ionic v2.0.0。

iosionic2ion-slides
9
J. Brandes

最後に、これをスライドの開始タグとして機能させることができました：

<ion-slides [options]="{pagination: true}">
3
J. Brandes

Ionic 3：

<ion-content>

  <ion-slides pager>
    <ion-slide>
      <h1>My Slide 1</h1>
    </ion-slide>
    <ion-slide> 
      <h1>My Slide 2</h1>
    </ion-slide>
    <ion-slide>
      <h1>My Slide 3</h1>
    </ion-slide>
  </ion-slides>

</ion-content>

Ionic Slides with pagination

7
gts

ポケットベルドットの位置を調整してみてください。多分それはあなたのイメージの後ろに現れています。 .scssファイルに含める：

.swiper-container-horizontal > .swiper-pagination
{
    bottom          : 50%; //Change accordingly
    z-index         : 99 !important;
}

私はあなたのコード（画像を除いた）をテストしました、それは私の上に現れています。

1
Huiting

ページをスライドするために swiper を使用している場合、同じことを行うための多くのパラメーターがあります-

<div class="swiper-pagination"></div>

ここにpaginatin-のコードがあります

    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        spaceBetween: 30,
    });

完全なコードには ここを見る を含めることができます。
スライダーのデモがあります http://idangero.us/swiper/demos/#.WUJGrROGNp8
これがあなたにも役立つことを願っています！

0
S.Yadav