向 Ionic2 的离子幻灯片添加水平滚动条

Question

我正在使用 Ionic2 的 ion-slides，它对我来说效果很好。

    <ion-slides [options]="extraOptions">
        <ion-slide *ngFor="let slide of slides">
            <img src="{{slide.image}}" />
        </ion-slide>
    </ion-slides>

我想在 Swiper API 中添加一个水平滚动条 http://idangero.us/swiper/api/#.V6Lcx8twbqA (13th example) as the docs mention Swiper is what is used for ion-slides. The source code for that example 在 <div class="swiper-wrapper"> 标签后有 <div class="swiper-scrollbar"></div>。

问题是 Ionic 生成 HTML 所以我怎么能添加滚动条功能。

要将分页项目符号添加到滑块，我只需在 ion-slides 标记中添加 pager 属性指令。水平滚动条有类似的东西吗？

Answer 1

这不能通过 Ionic 的 ion-slide 组件来完成。请在此处查看其中一位作者的回复：https://forum.ionicframework.com/t/how-to-add-horizontal-scrollbar-to-slides/59450/3?u=brightpixels

Not at the moment. We've tried to keep the Slides API much simpler than the original Swiper API. But we plan on revisiting this post 2.0 final

我已经通过直接使用 swiper 库并创建我自己的组件解决了这个问题。

通过 npm 安装模块：npm install swiper
在组件文件的顶部declare var require
然后var swiper = require('swiper')

向 Ionic2 的离子幻灯片添加水平滚动条

Adding horizontal scrollbar to Ionic2's ion-slides

swiper

ionic2

angular