Adding horizontal scrollbar to Ionic2's ion-slides

Question

I am using Ionic2's ion-slides which works fine for me.

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

I would like to add a horizontal scroll bar as shown here in the 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 has <div class="swiper-scrollbar"></div> after the <div class="swiper-wrapper"> tag.

The problem is that Ionic generates the HTML so how could I add the scrollbar feature on.

To add pagination bullets to slider, I only have to add pager attribute directive in the ion-slides tag. Is there something similar for the horizental scrollbar bar?

Answer 1

This can't be done via Ionic's ion-slide component. See reply from one of the authors here: 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

I have resolved this by using swiper library directly and creating my own component.

• Install module via npm: npm install swiper
• At the top of the component file declare var require
• Then var swiper = require('swiper')