Comments 12
На данный момент в css есть такие чудесные вещи, как scroll-snap, которые позволяют делать слайдеры более отзывчивыми особенно на мобильных устройствах. В итоге можно обойтись вообще без использования тяжёлых transform свойств для анимации прокрутки. Решение из статьи - это не решение. Это те же самые грабли только на Реакте :(
scroll-snap очень тупо работает и не кастомизируется, там очень высокие скорость и чувствительность на большинстве устройств, часто происходит перескакивание через слайд, в общем пока что это мало полезная вещь для совсем редких кейсов.
На данный момент поддержка полная всеми браузерами. Отсутствие тормозов, как у transform, самый главный плюс scroll-snap. Баг с перетаскиванием лишнего встречал где-то в комментариях многолетней давности, но примеры там были уже недоступны, а у меня не получилось повторить такое поведение, видимо я что-то не так делаю. В любом случае, можно жёстко задавать количество перетаскиваемых слайдов. Не так давно была статья https://habr.com/ru/articles/876202/ можно взять решение из неё, как отправную точку.
кажется вы не делали слайдеров
https://webkit.org/demos/scroll-snap/ - просто попробуйте сами полистать в chrome на android или с тачбара macbook в chrome
В ios safari только +/- нормально работает
в приведенной вами статье вот человек то же самое пишет - https://habr.com/ru/articles/876202/#comment_27829884
К сожалению наоборот пришлось поделать в своё время :( "Нарукожопить" на трансформациях проще и быстрее. Подход со снапом сложнее, т.к. приходится реализовывать сразу два решения.
Возможно косяки есть, не буду отрицать. Но лично я не вижу этой проблемы, либо проблемой для меня это не является. Возможно ещё на моих слайдерах это всё компенсируется отступами вокруг слайдов, а в приведённых примерах всё впритык. Где-то ещё был совет обернуть содержимое слайдов в фиксированный контейнер: https://habr.com/ru/articles/498456/#comment_21542276
Мне же наоборот нравится, что слайдер мгновенно реагирует на свайп даже на слабом старом андроиде, а не "ползёт" за пальцем с ощутимой задержкой.
Скорость конечно шикарная и это отличное решение для фиксации вертикального скролла на всяких лендингах, но не для слайдеров.
Потому что слайдер это не скролл.
Скролл с докруткой это всё равно скролл и он отличается от перетаскивания свайпами. У скролла есть инерция, когда крутанул, отпустил, уже ничего не нажимаешь а он продолжает крутить , у нативных слайдеров этого нет. Полистайте с разной интенсивностью экраны на своём телефоне - вот это типичный слайдер, а теперь сравните его с вертикальной прокруткой - это совершенно разные механики. И добавление докрутки до нужной точки не делает их похожими , опять же если бы было всё так просто, то не приходилось бы никогда возиться с transform и событиями touchmove , а просто бы сразу использовали нативный scroll и на js дописали бы только докрутку (scrollIntoView)
Мы наверно о разных слайдерах говорим. Вы об том, что показывает один слайд, я о примерно таких как в сайдбаре "истории" или, например, в приложении ВК в разделе "Возможно Вы знакомы". scroll-snap - это решение только для управления жестами. На дескопе всё придётся реализовывать иначе, дублировать поведение теми же трансформациями.
Докрутка не требуется с scroll-snap-type: x proximity.
scroll-snap-stop: always у дочерних элементов останавливает прокрутку на каждом слайде.
Все уже на свайпере давно
если в первой демке быстро прокликать до 8 точки, то слайд сменится всего лишь 2 раза https://i.imgur.com/lfCYeWX.png
анал
А сейчас давайте посмотрим, как начать работу со слайдером. Для этого необходимо скачать код по ссылке
без регистрации и СМС, и перенести папку...
Очень напрашивается npm install ...
на чистом JavaScript
Звучит, как исчерпывающее преимущество.
Но не в 2025 году.
Snake, альтернатива Slick slider на чистом JavaScript