2016-12-03 2 views
2

Ich baue eine kleine mobile App, und habe in Richtung Implementierung einer verschiebbaren Knopfleiste mit ionSlides (basierend auf dem Swiper Widget). Die Idee wäre, eine gewisse Anzahl von Elementen in dieser Leiste zu haben, die ein Benutzer zyklisch durchlaufen kann.Leerraum nach Schleife auf Ion-Folien

Das Problem mit meiner aktuellen Implementierung ist, dass nach dem Ende der ersten Schleife/vor der nächsten Schleife etwas Leerraum vorhanden ist. Im DOM werden keine 'leeren' Elemente generiert. Es gibt div mit einer swiper-wrapper Klasse, bei der der Transformations-Stil aktualisiert wurde, wenn ein Benutzer rutscht - er nähert sich dem Ende der Liste bis auf -500px und klickt nach dem Gleiten über den Leerraum wieder auf 0 zurück.

Gibt es eine Lösung, oder gibt es irgendwelche Attribute, die ich versuchen kann, auf die Optionen anzuwenden, oder hat jemand anderes dieses Problem schon einmal gesehen?

Einige Code:

index.html

<ion-slides options="options" slider="data.slider"> 
    <ion-slide-page ng-repeat="slide in slides" class="circle white-bg"> 
     <h2>{{slide}}</h2> 
    </ion-slide-page> 
</ion-slides> 

app.js

$scope.slides = ['1', '2', '3', '4', '5', '6']; 

$scope.options = { 
    loop: true, 
    effect: 'slide', 

    freeMode: true, 
    freeModeSticky: false, 

    width: 55, 
    spaceBetween: 25 
} 

Einige Fotos:

  1. Beginn des Schiebers slider start
  2. Gegen Ende der Folienliste slider mid
  3. Beispiel für ‚Füller‘ white space enter image description here Sobald 1 Schieben # aus Sicht geschoben wurde, kehren die Kisten in einen normalen Zustand, und ähnelt dem gleichen Verhalten wie Bild # 1.

Antwort

0

Für alle anderen, die dieses Problem haben könnte:

entfernte ich die Breite Attribut von $ scope.options und verwendet stattdessen slidesPerView. Schleifen ohne Leerzeichen!

$scope.options = { 
    loop: true, 
    effect: 'slide', 

    freeMode: true, 
    freeModeSticky: false, 

    slidesPerView: 6, 
    spaceBetween: 25 
}