Geek Answers Handbook

Adding a horizontal scrollbar to Ionic2 ion slides

I use Ionic2 ion-slides , which is great 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 scrollbar, as shown here, in the Swiper API http://idangero.us/swiper/api/#.V6Lcx8twbqA (13th example), since the docs mention Swiper this is what is used for ion-slides . The source code for this example has <div class="swiper-scrollbar"></div> after the <div class="swiper-wrapper"> .

The problem is that Ionic generates HTML, since I can add a scroll function.

To add pagination bullets to the slider, I need to add the pager attribute directive to the ion-slides tag. Is there something similar for a horizontal scrollbar?

+5
source share
1 answer

This cannot be done with an ionic ion-slide component. See the answer 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 solved this by using the swiper library directly and creating my own component.

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

More articles:


All Articles