Комментарии 17
Залейте на jsfiddle работающий пример
+1
Прокрутка элементов карусели осуществляется при помощи свойства transiton плавным изменением отступа margin-left от нуля до ширины элемента
Насколько я знаю, transiton и transform:translateX() будет работать лучше (в плане FPS) из-за особенностей рендеринга в браузерах.
0
Применение transition: margin связано с тем, что приходится не только сдвигать элементы, но и переставлять их. Рассмотрим сдвиг контейнера с элементами вправо. Последний элемент в линейке клонируется и подставляется перед первым элементом. Одновременно свойство margin-left контейнера уменьшается до отрицательного значения, равного ширине элемента. Последний элемент, вставленный перед первым, остаётся невидимым. Далее линейка элементов медленно сдвигается (прокручивается) вправо и последний элемент становится первым. Свойство margin-left становится равным нулю, как и было до перестановки.
0
Непреодолимое ощущение, что я читаю Хабр 2006 года. Или что вы прятались в криокамере лет 10. Стиль написания кода, подход к анимации, терминология — всё это говорит о том, что вы очень сильно отстали от сообщества. Сейчас стили и скрипты пишут по-другому, не говорят CSS3 и не пишут префиксы в стилях. Почитайте статьи на CSS-Tricks, не надо пока ничего писать, а то я от испанского стыда умираю, глядя на это.
0
Главное не форма, главное содержание. Так гласит диалектика, которую теперь не изучают
0
Ну так сдохните и читайте. Автор, не слушай таких идиотских комментариев. Так обычно пишут люди, которым нечего сказать самим. То есть пустышки.
-1
В текст программы внесены изменения. Для предотвращения кратного срабатывания события touchmove введен оператор stTime=0 (Line 173). Добавлена вспомогательная переменная mvTime.
0
Здравствуйте,
мне понравилась Ваша каруселька и я стал использовать её (если вы не против) на сайте для отображения элементов в мобильной версии сайта. И столкнулся со следующим:
1. Даже небольшой свайп прокручивает всю карусельку до конца. Можно ли что-нибудь с этим сделать? Стрелки работают отменно.
2. Не очень понятна работа параметра elemVisible. На десктопе пробовал менять, но всегда 3 элемента. При уменьшении размера экрана уменьшает количество исправно. Сейчас я поставил значение 1. На вертикальной версии мобильного устройства — 1 элемент. На горизонтальной — 2. Не могу уловить логику :(
мне понравилась Ваша каруселька и я стал использовать её (если вы не против) на сайте для отображения элементов в мобильной версии сайта. И столкнулся со следующим:
1. Даже небольшой свайп прокручивает всю карусельку до конца. Можно ли что-нибудь с этим сделать? Стрелки работают отменно.
2. Не очень понятна работа параметра elemVisible. На десктопе пробовал менять, но всегда 3 элемента. При уменьшении размера экрана уменьшает количество исправно. Сейчас я поставил значение 1. На вертикальной версии мобильного устройства — 1 элемент. На горизонтальной — 2. Не могу уловить логику :(
0
Спасибо.
0
Хорошая карусель! Однако в случае замедления скорости анимации начинают наблюдаться небольшие фризы в моменте остановки движения. Как можно добиться максимальной плавности приостановки элемента? И возможно ли в принципе обойтись без приостановки, оставив плавное медленное движение карусели?
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Ant-карусель на CSS и Javascript