在离子幻灯片中添加水平滚动条

Question

我正在使用ionic2的ion-slides，这对我来说很好。

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

我想添加一个水平滚动条，如Swiper http://idangero.us/swiper/api/#.V6Lcx8twbqA (第13个例子)中所示，因为文档中提到Swiper是用于ion-slides的。该示例的源代码在<div class="swiper-wrapper">标记之后有<div class="swiper-scrollbar"></div>。

问题是Ionic生成HTML，所以我如何添加滚动条功能。

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

Answer 1

这不能通过离子滑动元件来完成。见本文作者之一的回复：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

我已经解决了这一点，直接使用刷库和创建我自己的组件。

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