白色 space 在 Ion-slides 上循环后

Question

我正在构建一个小型移动应用程序，并希望使用 ionSlides (based on the Swiper 小部件实现滑动按钮栏。这个想法是在这个栏上有一些用户可以 cycle/loop 通过的项目。

我当前实现的问题是在第一个 loop/before 下一个循环结束后有一些白色 space。在 DOM 中，没有生成 'blank' 元素。 div 和 swiper-wrapper class 的变换样式随着用户滑动而更新——它接近列表末尾的 -500px，然后点击回到 0滑过白色space.

是否有修复，或者是否有任何我可以尝试应用于选项的属性，或者其他人之前是否遇到过这个问题？

一些代码：

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
}

部分图片：

滑块开始
接近幻灯片列表的末尾
例子 'filler' 白色 space 幻灯片 #1 滑出视图后，方框 return 变为正常状态，类似于图片 #1 的行为。

Answer 1

对于可能遇到此问题的任何其他人：

我从 $scope.options 中删除了 width 属性，并改用 slidesPerView。没有任何白色的循环 space!

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

  freeMode: true,
  freeModeSticky: false,

  slidesPerView: 6,
  spaceBetween: 25
}

Answer 2

试试这个：

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

      freeMode: true,
      freeModeSticky: false,

      slidesPerView: 'auto',
      spaceBetween: 25
    }

css:

.swiper-slide {
  width: 55px;
}

白色 space 在 Ion-slides 上循环后

White space after loop on Ion-slides

slider

slide

angularjs

ionic-framework