イオンスライド上のページャドットを表示イオン成分

Question

私はイオン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 class="swiper-pager hide"> だから私は間違いなくページャを再表示するために右のパラメータを使用していないよ：ブラウザでの検査の際を、私はこのようなdivのコンテナでレンダリングされているページャを見ています。またはバグがあります。私はIonic v2.0.0を使用しています。

Answer 1

は、最後には、スライドの開始タグとしてこれで動作するようになった：

<ion-slides [options]="{pagination: true}"> 

Answer 2

ページャの位置を調整することができます。たぶんあなたのイメージの後ろに現れています。あなたの.scssファイルに含める：私は（マイナスイメージを）あなたのコードをテストしている

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

、それは私の上に表示されています。

Answer 3

ページをスライドさせるswiperを使用している場合は、同じままの

を行うには多くのパラメータがありますここ

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

は

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

paginatin-完全なコードのコードがを持つことができています3210。
私たちはスライダーのデモを持っています。 http://idangero.us/swiper/demos/#.WUJGrROGNp8
これはあなたを助けるでしょう！イオン3で私のために

Answer 4

この作品：

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