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

Тема в разделе "JavaScript", создана пользователем fortuner, 19 окт 2015.

Модераторы: ZiX
  1. fortuner

    fortuner Нарушитель

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

    Пример http://flickity.metafizzy.co/ - хороший слайдер с адаптивностью и инерцией, но глючит в хроме.
    И я не знаю как это поправить.
    Еще один пример: http://amazon.com - на мобильных используется описанный выше эффект.

    Короче, подскажите рабочий скрипт или как добавить подобную фичу в любой другой слайдер.:)
     
  2. funnywheel

    funnywheel

    Регистр.:
    6 авг 2010
    Сообщения:
    177
    Симпатии:
    111
    что вы подразумеваете под инерцией? если временную функцию смены слайда - то вам нужно написать/найти подходящую cubic bezier функцию, для наглядности посмотрите тут, а для практической цели погуглите

    Составить подходящую функцию можно удобно вот здесь

    А хороший слайдер, который поддерживает адаптивность и просто все, что только можно возжелать от слайдера - bxslider, настройка анимации у bxslider'a - тыц
     
  3. fortuner

    fortuner Нарушитель

    Регистр.:
    26 июн 2012
    Сообщения:
    340
    Симпатии:
    304
    Привет!
    cubic bezier - это немного не то.
    Инерция это когда делаешь мышкой drag and drop (или пальцем на смартфоне) и слайды продолжают некоторое время перелистываться по инерции в зависимости от скорости твоего жеста (или движения мышкой).
    Вот пример инерции, но как я уже говорил этот слайдер глючит в хроме.
    http://flickity.metafizzy.co/options.html - опция freeScroll.
     
  4. funnywheel

    funnywheel

    Регистр.:
    6 авг 2010
    Сообщения:
    177
    Симпатии:
    111
    По ссылке, которую дали, есть пример на codepen'e, попробовал на Chrome 46, Firefox 41 - все ок, ни намека на баг. В старой опере глючит, именно freeScroll не работает.

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

    fortuner Нарушитель

    Регистр.:
    26 июн 2012
    Сообщения:
    340
    Симпатии:
    304
    Вот как выглядит в Chrome 45, Vivaldi (не подумайте плохого, поставил ради интереса) и прочих Webkit-ах.

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

    Вложения:

  6. funnywheel

    funnywheel

    Регистр.:
    6 авг 2010
    Сообщения:
    177
    Симпатии:
    111
    Я и не думаю плохого, Vivaldi я желаю всего самого наилучшего, крутые парни его пилят =)

    А можно исходник или лучше на codepen или jsfiddle, посмотреть поближе не помешает.