White space after loop on Ion-slides

2
votes

I'm building a small scale mobile app, and have looked towards implementing a sliding button bar using ionSlides (based on the Swiper widget). The idea would be to have some amount of items on this bar that a user can cycle/loop through.

The issue with my current implementation is that there is some amount of white space after the end of the first loop/before the next loop. In the DOM, there are no 'blank' elements being generated. There is div with a swiper-wrapper class that has it's transform style updated as a user slides -- it gets close to -500px towards the end of the list, and clicks back to 0 after sliding past the white space.

Is there a fix, or are there any attributes that I can try to apply to the options, or has anyone else seen this issue before?

Some 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
}

Some pictures:

  1. Start of slider slider start
  2. Towards the end of slide list slider mid
  3. Example of 'filler' white space enter image description here Once Slide #1 has been slid out of view, the boxes return to a normal state, and resembles the same behavior as picture #1.
2
angularjsionic-frameworksliderslide

2 Answers

0
votes

For anyone else who might have this issue:

I removed the width attribute from from $scope.options, and used slidesPerView instead. Loops without any white space!

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

  freeMode: true,
  freeModeSticky: false,

  slidesPerView: 6,
  spaceBetween: 25
}
0
votes

Try this:

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

      freeMode: true,
      freeModeSticky: false,

      slidesPerView: 'auto',
      spaceBetween: 25
    }

css:

.swiper-slide {
  width: 55px;
}