2016-12-03 8 views
2

私は小規模なモバイルアプリケーションを構築しており、ionSlidesSwiperウィジェットに基づく)を使用してスライドボタンバーを実装する方向に向かっています。アイデアは、このバーにある程度の量のアイテムをユーザが循環/ループすることができるようにすることです。イオンスライド上の白い空白ループ

現在の実装での問題は、最初のループの終了後/次のループの前にある程度の空白があることです。 DOMでは、空の要素が生成されません。 swiper-wrapperクラスのdivがあり、ユーザーがスライドするときに変換スタイルが更新されます。リストの最後に向かって-500pxに近づき、空白を超えてスライドした後に0に戻ります。

修正プログラムがありますか、またはオプションに適用しようとする可能性のある属性がありますか、以前にこの問題を他の誰かに見せたことがありますか?

いくつかのコード:

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 
} 

いくつかの写真:

    スライダーの
  1. スタート slider start
  2. スライドリストの終わりに向かって enter image description here 「フィラー」ホワイトスペースの slider mid
  3. 例スライド#1一度は、ボックスは通常の状態に戻り、ビューの外にスライドされていますピクチャ#1と同じ動作に似ています。この問題がある可能性があります他の誰のために

答えて

0

私は$ scope.optionsからのwidth属性を削除し、代わりにslidesPerViewを使用。空白のないループ!

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

    freeMode: true, 
    freeModeSticky: false, 

    slidesPerView: 6, 
    spaceBetween: 25 
}