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:
- Start of slider
- Towards the end of slide list
- Example of ‘filler’ white space
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