White space after loop on Ion-slides


#1

Hey all,

Recently posted a question on SO, but wanted to open the discussion up to the forums here.

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="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.

I’m curious if anyone has seen this behavior, or if this is a known issue. Thanks all for your thoughts and comments.

Cordova CLI: 6.4.0
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: OS X El Capitan
Node Version: v4.4.7
Xcode version: Not installed


#2

This is quite a serious issue guys? Can anyone help?


#3

You’re free to file a bug report on the github of Ionic. If you do, please let us now in this topic so people can track the issue as well.


#4

hey u got the solution for the above issue? than please tell me even i am facing similar problem like this


#5

Any solution for this issue?
I’m facing this too