在 ion-slides 离子组件上显示寻呼机点

Question

我正在尝试在 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.

Answer 1

您可以尝试调整寻呼机点的位置。也许它出现在你的形象后面。包含在您的 .scss 文件中：

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

我已经测试了您的代码（减去图像），它出现在我的代码中。

Answer 2

终于将其用作幻灯片的开始标记：

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

Answer 3

如果你是用swiper来滑动翻页，有很多参数和-

一样

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

这里是paginatin的代码-

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

完整的代码可以有一个look here.
我们有滑块演示 - http://idangero.us/swiper/demos/#.WUJGrROGNp8
希望这对你也有帮助！

Answer 4

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

在 ion-slides 离子组件上显示寻呼机点

Show pager dots on ion-slides ionic component

ios

ionic2

ion-slides