ons-carousel swipe

[phantomfl]

On the mobile device, if I place my finger on the carousel and swipe immediately, it works fine.
However, if my finger rests on a carousel item even for a few milliseconds without swiping, by the time I attempt to swipe the carousel doesn’t respond to the swiping gesture anymore and there’s no scrolling.

Is there anything I could change or add to my carousel code (see below) so it still scrolls when I proceed with the swiping gesture even after a short hesitation?

NOTE: The behavior I am trying to replicate would be the same as in the Monaca browser previewer, when you click with the mouse on a carousel item, and while still holding the mouse button down you drag left or right and it works even after a delay.

<ons-carousel id="carousel" animation-options="{duration:0.4, delay:0, timing:'ease-in'}" item-width="34%" style="height: 70px;" swipeable auto-scroll overscrollable>

Also, is there anywhere a more in-depth reference for the animation-options attribute and its options besides the example provided here and the line shown below? Or, if duration, delay and timing are the only options, please let me know what they mean exactly and what value ranges they can take.

{duration: 0.2, delay: 1, timing: 'ease-in'}

Thanks in advance.

[emccorson]

I tried holding then dragging with the carousel example on the playground, and it appears it does actually work but it’s a bit temperamental. By temperamental I mean it usually works but occasionally it won’t drag after holding. (I tried it on Android and desktop but not iOS.)

Are you able to hold and drag with the example in the playground? (https://onsen.io/playground/?framework=vanilla&category=reference&module=carousel)

I’m still looking into the animation options and I’ll get back to you as soon as I can. The documentation is definitely lacking here.

[phantomfl]

I tested holding & dragging with the playground example on an Android and it didn’t work, unless the hold was really short. I have no way of telling how short exactly, but it was really short, maybe 0.2s, maybe less.

Tested the same on a Windows laptop with touchscreen and it actually worked in almost all attempts, in the same way it worked while using the mouse in my original post.

My assumption is that the carousel on the Windows device treats the holding part in the same manner as it treats a mouse click while mouse button is still pressed (even for long periods of time), then scrolls when we “swipe” using the mouse, as long as we don’t release the mouse button in between.

Thanks for looking into the animation options.

[emccorson]

Unfortunately I think if I can’t find a way to consistently replicate this on one of my devices then I can’t fix the problem you’re having. Since you can replicate the problem on your device, feel free to submit a PR if you can get something working.

As for the animation options…

It looks like there are three options: duration, delay and timing.

duration specifies the total time the animation takes from beginning to end.

delay specifies the time to wait before starting the animation.

timing specifies how intermediate values are calculated i.e. how the animation gets from the beginning to the end. I found occurrences in the codebase of three values for this: linear, ease-in and cubic-bezier. I believe these correspond to values for the CSS transition-timing-function (https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function).