2016-08-03 25 views
5

Ich benutze Ionic2s ion-slides, die für mich gut funktionieren.Horizontale Bildlaufleiste zu Ionic2s Ionen-Objektträgern hinzufügen

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

Ich mag würde eine horizontale Bildlaufleiste hinzufügen, wie hier in der API swiper gezeigt http://idangero.us/swiper/api/#.V6Lcx8twbqA (13. Beispiel), wie die Dokumentation erwähnen swiper ist, was für ion-slides verwendet wird. Die source code for that example hat <div class="swiper-scrollbar"></div> nach dem <div class="swiper-wrapper"> Tag.

Das Problem ist, dass Ionic das HTML erzeugt, also wie könnte ich die Scrollbar-Funktion hinzufügen.

Um dem Schieberegler Paginierungs-Aufzählungszeichen hinzuzufügen, muss nur die Attribut-Direktive pager im Tag ion-slides hinzugefügt werden. Gibt es etwas Ähnliches für die horizontale Bildlaufleiste?

Antwort

6

Dies kann nicht über die Ion-Slide-Komponente von Ionic erfolgen. Siehe Antwort von einem der Autoren hier: 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 

ich dies direkt über swiper Bibliothek aufgelöst habe und meine eigene Komponente zu schaffen.

  • Installieren Modul über npm: npm install swiper
  • An der Spitze der Komponentendatei declare var require
  • Dann var swiper = require('swiper')