Smooth, Continuous Swipe Transition on Slider?

Question

Hi,
first of all I'd like to say this really looks like a great project. As it matures I am definitely going to buy a few licenses.

My question: are you considering to use something like iScroll to get a real smooth scrolling/swiping experience?

Keep up the good work,
Wim

Comments

Thanks, Wim. Are you interested in iScroll for scrolling text, or the entire navigation of the pages?

---

Hi Justin, I am interested in using it for the entire navigation of the pages. I generated a horizontal slider test doc and tested its use on an iPAD. I noticed it is a lot less smooth than iScroll (seems to be used in quite a few places). Hence my request for consideration.
Kind regards,
Wim

---

Thanks for the clarification. We'll keep iScroll in mind going forward.

---

I have replaced anythingslider with iScroll4 after generating the code, just to show what I mean ;).
It is not difficult to do, but the resulting "swipe smoothness" is much closer to the expected iPad behavior.
Very small demo:
http://digipublish.eu/in5/iscroll

PS 1.3 is a great release :)

---

Cool! Thanks for putting this together!

Answer 1

This will be integrated into the default code at some point in the future after we've done more testing, but for now, you can export a Slider with swipe enabled and attach the following code as a .js file in the Resources section of the in5 dialog to create a "smooth" swipe:

$(function(){
  $("#container").swipe("destroy");
  var pageWidth = parseInt($(".page").width());
  var pageChangeThreshold = pageWidth*.33;
  var pageWrap = $('.pages'), startPos, vertMode = false,
  nextProp = 'left', backProp = 'right', moveProp = 'left';
  var cancelSwipe = function(){
      pageWrap.animate({left:startPos+'px'},'fast');
  };
  $("#container").swipe({
          allowPageScroll: (vertMode ? 'horizontal' : 'vertical'),
        fingers:1,
excludedElements:$.fn.swipe.defaults.excludedElements+',.mejs-overlay-button,map,[onclick],[data-useswipe="1"],[data-tapstart="1"], .panzoom,.scroll-horiz',
        swipeStatus:function(event, phase, direction, distance, duration, fingers) {
            switch(phase){
                case 'start':
                    startPos = parseInt(pageWrap.css(moveProp));
                    break;
                case 'end':
                    if(distance > pageChangeThreshold){
                        switch(direction){
                            case nextProp:
                                if(nav.current < nav.numPages) nav.next();
                                else cancelSwipe();
                                break;
                            case backProp:
                                if(nav.current > 1) nav.back();
                                else cancelSwipe();
                                break;
                        }
                    } else {
                        cancelSwipe();
                    }
                    break;
                case 'move':            
                    switch(direction){
                        case nextProp:
                            pageWrap.css(moveProp, (startPos-distance)+'px');
                            break;
                        case backProp:
                            pageWrap.css(moveProp, (startPos+distance)+'px');
                            break;
                    }
                    break;
                case 'cancel':
                    cancelSwipe();
                    break;
            }
        },
        threshold:4,
        maxTimeThreshold:9000
    });
})
 

Comments

It's in the animate function. Reference:
http://api.jquery.com/animate/

---

I think you'd need to add JS to modify the animationTime setting. E.g.,

sliderSettings.animationTime = 600;

600 milliseconds is the default, so change that number to make it slower or faster.

I'm not sure what you mean by the "vertical floating"...are the pages varying heights?

---

Thanks for the video. That's very helpful! That up and down movement is default for iOS. I don't think there's safe way to override that with CSS or JavaScript.

---

No, requires this extra code.

---

Sorry, no idea. Since this is not an official feature, it has not been thoroughly tested.