pagePiling.js
pagePiling.js copied to clipboard
alvarotrigo
Horizontal swiping issue
I was trying to integrate owl carousel with pagePiling to create some horizontal slides within the vertical sections. I realized that pagePiling jumps to the next slide while even swiping horizontally. I looked at the plugin code and on line 773 we have this: if (Math.abs(touchStartY - touchEndY) > (container.height() / 100 * options.touchSensitivity)) { ... } container.height() returns 0 as all of its children are absolute positioned. That makes this statement always true and causes touch sensitivity to not work as intended. I got around this by setting the container height to 100% (or 100vh for IE9+) and that fixed my problem. Or may be we could use the height of one of the slides? Please do correct me if I'm making a mistake however I thought I should point this out.
That's a nice point. Thanks for reporting it! Although I'm not quite sure that fixing it can solve the problem in the best way for you.
Pagepiling is only taking into consideration the Y position and it will slide up or down in any case. You can play with the touchSensitivity option to prevent sliding up or down on a very small change of the Y position, but still not the perfect way to do it.
I'll correct the issue with the height in the next few days. Thanks for it!
Workaround.
In my design, I have galleries with touch enabled features that were conflicting with this plugin. A quick fix that I used was having a thumbnail that linked to the gallery in a lightbox that was called outside of the wrapper for pagepiling.
@yanballas pagePiling.js is not actively maintained. I'd recommend you to switch to fullPage.js instead which is my main focus now :)
@alvarotrigo Can I use fullPage.js for commercial production of a small website? I can't figure out the license and unfortunately I can't buy the paid version. If not, could you tell me how to solve the problem with horizontal swipe? Thank you.