Слайдер с инерцией (inertial, kinetic slider)

fortuner

Хранитель порядка
Регистрация
26 Июн 2012
Сообщения
631
Реакции
1.238
Всем привет!
Подскажите, слайдер с кинетической прокруткой элементов.
Как это выглядит: жестом на смартфоне перелистываем слайды и если отпустить палец во время листания, то слайды продолжают двигаться по инерции. Короче, привычный жест листания в любых приложениях на мобиле.

Пример Для просмотра ссылки Войди или Зарегистрируйся - хороший слайдер с адаптивностью и инерцией, но глючит в хроме.
И я не знаю как это поправить.
Еще один пример: Для просмотра ссылки Войди или Зарегистрируйся - на мобильных используется описанный выше эффект.

Короче, подскажите рабочий скрипт или как добавить подобную фичу в любой другой слайдер.:)
 
Пример Для просмотра ссылки Войди или Зарегистрируйся - хороший слайдер с адаптивностью и инерцией, но глючит в хроме.
что вы подразумеваете под инерцией? если временную функцию смены слайда - то вам нужно написать/найти подходящую cubic bezier функцию, для наглядности посмотрите Для просмотра ссылки Войди или Зарегистрируйся, а для практической цели Для просмотра ссылки Войди или Зарегистрируйся

Составить подходящую функцию можно удобно вот Для просмотра ссылки Войди или Зарегистрируйся

А хороший слайдер, который поддерживает адаптивность и просто все, что только можно возжелать от слайдера - Для просмотра ссылки Войди или Зарегистрируйся, настройка анимации у bxslider'a - Для просмотра ссылки Войди или Зарегистрируйся
 
что вы подразумеваете под инерцией? если временную функцию смены слайда - то вам нужно написать/найти подходящую cubic bezier функцию, для наглядности посмотрите Для просмотра ссылки Войди или Зарегистрируйся, а для практической цели Для просмотра ссылки Войди или Зарегистрируйся

Составить подходящую функцию можно удобно вот Для просмотра ссылки Войди или Зарегистрируйся

А хороший слайдер, который поддерживает адаптивность и просто все, что только можно возжелать от слайдера - Для просмотра ссылки Войди или Зарегистрируйся, настройка анимации у bxslider'a - Для просмотра ссылки Войди или Зарегистрируйся
Привет!
cubic bezier - это немного не то.
Инерция это когда делаешь мышкой drag and drop (или пальцем на смартфоне) и слайды продолжают некоторое время перелистываться по инерции в зависимости от скорости твоего жеста (или движения мышкой).
Вот пример инерции, но как я уже говорил этот слайдер глючит в хроме.
Для просмотра ссылки Войди или Зарегистрируйся - опция freeScroll.
 
Вот пример инерции, но как я уже говорил этот слайдер глючит в хроме.
По ссылке, которую дали, есть пример на Для просмотра ссылки Войди или Зарегистрируйся, попробовал на Chrome 46, Firefox 41 - все ок, ни намека на баг. В старой опере глючит, именно freeScroll не работает.

PS: из праздного любопытства, зачем нужна такая фича в продакшене? вижу смысл только если нужно панорамную фотку красиво скроллить, предварительно порезав ее на куски, с какой-нибудь хитрой целью =)
 
По ссылке, которую дали, есть пример на Для просмотра ссылки Войди или Зарегистрируйся, попробовал на Chrome 46, Firefox 41 - все ок, ни намека на баг. В старой опере глючит, именно freeScroll не работает.

PS: из праздного любопытства, зачем нужна такая фича в продакшене? вижу смысл только если нужно панорамную фотку красиво скроллить, предварительно порезав ее на куски, с какой-нибудь хитрой целью =)
Вот как выглядит в Chrome 45, Vivaldi (не подумайте плохого, поставил ради интереса) и прочих Webkit-ах.

Зачем нужно? Дело в том, что подобное поведение при листании привычно на всех мобильных платформах. На мой взгляд это более "юзер-френдли", чем тыкать в стрелочки или листать по одному слайду.
 

Вложения

  • Снимок.JPG
    Снимок.JPG
    20,1 KB · Просмотры: 6
Vivaldi (не подумайте плохого, поставил ради интереса) и прочих Webkit-ах.
Я и не думаю плохого, Vivaldi я желаю всего самого наилучшего, крутые парни его пилят =)

Зачем нужно? Дело в том, что подобное поведение при листании привычно на всех мобильных платформах. На мой взгляд это более "юзер-френдли", чем тыкать в стрелочки или листать по одному слайду.
А можно исходник или лучше на codepen или jsfiddle, посмотреть поближе не помешает.
 
Назад
Сверху