Ant-карусель на CSS и Javascript

[@Eugeny1987]

Залейте на jsfiddle работающий пример

[@pvbk]

<script async src="//jsfiddle.net/pvbk0spb/ck6sn8xL/16/embed/js,html,css,result/dark/"></script>

[@Eugeny1987]

встройте теперь jsfiddle в статью :)

[@pvbk]

Ok

[@Fess_blaga]

А теперь попробуйте несколько раз подряд кликнуть на стрелку)))

Чего оно дёргается то?

[@pvbk]

Исправил

[@Fess_blaga]

Прокрутка элементов карусели осуществляется при помощи свойства transiton плавным изменением отступа margin-left от нуля до ширины элемента

Насколько я знаю, transiton и transform:translateX() будет работать лучше (в плане FPS) из-за особенностей рендеринга в браузерах.

[@pvbk]

Применение transition: margin связано с тем, что приходится не только сдвигать элементы, но и переставлять их. Рассмотрим сдвиг контейнера с элементами вправо. Последний элемент в линейке клонируется и подставляется перед первым элементом. Одновременно свойство margin-left контейнера уменьшается до отрицательного значения, равного ширине элемента. Последний элемент, вставленный перед первым, остаётся невидимым. Далее линейка элементов медленно сдвигается (прокручивается) вправо и последний элемент становится первым. Свойство margin-left становится равным нулю, как и было до перестановки.

[@pepelsbey]

Непреодолимое ощущение, что я читаю Хабр 2006 года. Или что вы прятались в криокамере лет 10. Стиль написания кода, подход к анимации, терминология — всё это говорит о том, что вы очень сильно отстали от сообщества. Сейчас стили и скрипты пишут по-другому, не говорят CSS3 и не пишут префиксы в стилях. Почитайте статьи на CSS-Tricks, не надо пока ничего писать, а то я от испанского стыда умираю, глядя на это.

[@pvbk]

Главное не форма, главное содержание. Так гласит диалектика, которую теперь не изучают

[@Myakish999]

Ну так сдохните и читайте. Автор, не слушай таких идиотских комментариев. Так обычно пишут люди, которым нечего сказать самим. То есть пустышки.

[@pvbk]

В текст программы внесены изменения. Для предотвращения кратного срабатывания события touchmove введен оператор stTime=0 (Line 173). Добавлена вспомогательная переменная mvTime.

[@Myakish999]

Здравствуйте,
мне понравилась Ваша каруселька и я стал использовать её (если вы не против) на сайте для отображения элементов в мобильной версии сайта. И столкнулся со следующим:
1. Даже небольшой свайп прокручивает всю карусельку до конца. Можно ли что-нибудь с этим сделать? Стрелки работают отменно.
2. Не очень понятна работа параметра elemVisible. На десктопе пробовал менять, но всегда 3 элемента. При уменьшении размера экрана уменьшает количество исправно. Сейчас я поставил значение 1. На вертикальной версии мобильного устройства — 1 элемент. На горизонтальной — 2. Не могу уловить логику :(

[@pvbk]

ответил в диалогах

[@Myakish999]

Спасибо.

[@semkiller]

Хорошая карусель! Однако в случае замедления скорости анимации начинают наблюдаться небольшие фризы в моменте остановки движения. Как можно добиться максимальной плавности приостановки элемента? И возможно ли в принципе обойтись без приостановки, оставив плавное медленное движение карусели?

[@pvbk]

см. диалоги