Показать точки пейджера на ионном слайде ионный компонент

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"> Так что я определенно не используя правильные параметры, чтобы отобразить пейджер. Или есть ошибка. Я использую 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> 

здесь код paginatin-

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

Полный код может иметь look here.
У нас есть демонстрация слайдера as- http://idangero.us/swiper/demos/#.WUJGrROGNp8
Надеюсь, это также поможет!

Answer 4

Эта работа для меня в ионическом 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>