yaTouchSlider - slider for touch devices

On many mobile sites known to us for touch devices, sliders (leaflets) are arranged so that animation occurs after a swipe gesture, after a person has removed his finger. This is not as beautiful and not as convenient as in the native sliders, for example, on the main screens of iOS devices.

We made a jQuery plugin that helps make the slider look like a native one, and we want to share it with everyone interested. You can see the plugin’s work, for example, in the weather or pictures in the  new search results page for iPhone and iPod Touch.

Unlike regular CSS3 Transform, "3D" uses hardware GPU acceleration in iOS. This allows you to achieve a very smooth and enjoyable animation. The topic of hardware acceleration of animation itself is quite extensive, in the future there will be a separate article on this topic.

To make the slider feel native, we took into account many details:

• if the swipe gesture is long, immediately by several points, then the slider will understand this;
• if you swipe less than one step, while not having overcome the specified threshold (30 pixels by default), the slider will “spring” back;
• the slider will also spring back when trying to swipe beyond the left or right limit.

Gesture Dependence

To make the slider behave more lively and meet the expectations of the gesture, we taught him to understand acceleration. It is calculated using the following formula (conditions and values ​​for it were selected experimentally): Where speed is the distance from the beginning to the end of the swipe gesture divided by its time (school knowledge “v = s / t” was finally useful :) The average swipe gesture - about 0.4-0.6 pixels per millisecond. There is a very small, but still noticeable variation in the CSS Transition animation time: After it, the step is multiplied by the acceleration value and the animation occurs.

accel = speed > 0.3 && speed < 0.6 ? 2 :
speed >= 0.6 && speed < 1 ? 3 :
speed >= 1 ? 4 :
1;





animationTime = accel >= 3 ? '0.3' : '0.2';

External API

When attaching a slider to a block, you can specify a callback function. It will be called up at every swipe with a forwarded set of all the necessary data - speed, step, limits, time and so on. Also, the slider can be moved without the help of a finger, triggering events on the slider block slideLeft([шаг])or slideRight([шаг]).

“Fork us on GitHub”

You can view or download the plugin code with comments in the project repository on Github .

PS: We invite everyone interested in the official blog of Yandex interface developers .