Oooooh I solved it!
Ok, it’s intricate, but it works very well for my needs (ie: it may not work for everyone’s general needs). I went back to my original code, toggling the visibility of each slide. The change I made is that when you’re about to move to the next slide, you make the neighboring slides visible, too. After the swipe is complete, you hide everything but the current slide.
As @fishgrind suggested, you need to use sliderOptions, so your *.ts file should look something like this:
export class HomePage {
@ViewChild('mySlider') _slider: Slides;
public _sliderOptions: any;
public _payload: any[]; // NOTE: this is custom to my code that my slides are generated from in an ngFor loop -- it doesn't stand to help anyone else struggling with this problem
constructor(public _navCtrl: NavController, public http: Http) {
let me = this; // use a ref to ME in the block function, below
this._sliderOptions = {
pager: false,
onTouchStart : function (){
console.log('onTouchStart triggered...');
let currentSlide = me._slider.getActiveIndex();
console.log(' current slide = ' + currentSlide);
let numSlides = me._payload.length; // NOTE: I calculate this from an array of data & your code will likely not!!!!! you should use _slider.length()
// change this range if you want to jump more than 1 slide away
let lowerRange = Math.max(0, currentSlide - 1);
let upperRange = Math.min(numSlides - 1, currentSlide + 1);
console.log('[' + lowerRange + ', ' + upperRange + ']');
me.SetVisibleSlideRange(lowerRange, upperRange);
}
}
}
Here is the SetVisibleSlideRange function:
SetVisibleSlideRange(i: number, j: number) { // slides i through j will be visible, the rest will be invisible
let numSlides = this._payload.length;
console.log('slide count = ' + numSlides);
for (let index = 0; index < numSlides; index++)
if (index >= i && index <= j)
this.SlideVisibility(index, true);
else
this.SlideVisibility(index, false);
}
// helper: only called from SetVisibleSlide and SetVisibleSlideRange
SlideVisibility(index: number, visible: boolean) {
let htmlID = this._payload[index].htmlID; // get the DOM element's ID
let slide = document.getElementById(htmlID);
if (visible)
slide.style.display = 'inline';
else {
//slide.style.visibility = 'hidden'; // "visibility: hidden" means the object is in its same place and size, just not rendered
slide.style.display = 'none'; // "display: none" means the object is not a part of the DOM and size = 0
}
}
And over on the *.html side, your slider needs to take in the options you’ve just set up:
<ion-slides #mySlider (ionDidChange)="SlideChanged()" [options]="_sliderOptions" id="ionSlider">
I use SlideChanged to remove the visibility of the neighboring slides.
