Владимир Потемкин@pvbk
Исследователь
Ant-карусель на CSS и Javascript
см. диалоги
Ant-карусель на CSS и Javascript
ответил в диалогах
Простой слайдер изображений на CSS и Javascript
Скрипт написан только что и у автора нет большого опыта работы с мобильными устройствами, все настройки установлены “на глазок” (обработчик события touchmove). Попробуйте слегка изменить расстояние между точками касания и отпускания экрана — уменьшить до 10-12 пикс. (сейчас 15), а время прикосновения увеличить до 100-120 мс (сейчас 75). Это должно увеличить надёжность срабатывания.
Простой слайдер изображений на CSS и Javascript
JavaScript вставил
Простой слайдер изображений на CSS и Javascript
Код Javascript, а также HTML и CSS с результатом находятся во фрейме JSFiddle перед фразой про открытые источники изображений
Простой слайдер изображений на CSS и Javascript
По видимому, баг исправлен. Карусель — пролистывание касанием работает устойчиво. Проверено на тел. Samsung J7, Android ver.8.1.0
Ant-карусель на CSS и Javascript
В текст программы внесены изменения. Для предотвращения кратного срабатывания события touchmove введен оператор stTime=0 (Line 173). Добавлена вспомогательная переменная mvTime.
Простой слайдер изображений на CSS и Javascript
Имеется ввиду, что скрипт не использует библиотеки и плагины, например jQuery
Ant-карусель на CSS и Javascript
Исправил
Ant-карусель на CSS и Javascript
Главное не форма, главное содержание. Так гласит диалектика, которую теперь не изучают
Ant-карусель на CSS и Javascript
Ok
Ant-карусель на CSS и Javascript
Применение transition: margin связано с тем, что приходится не только сдвигать элементы, но и переставлять их. Рассмотрим сдвиг контейнера с элементами вправо. Последний элемент в линейке клонируется и подставляется перед первым элементом. Одновременно свойство margin-left контейнера уменьшается до отрицательного значения, равного ширине элемента. Последний элемент, вставленный перед первым, остаётся невидимым. Далее линейка элементов медленно сдвигается (прокручивается) вправо и последний элемент становится первым. Свойство margin-left становится равным нулю, как и было до перестановки.
Ant-карусель на CSS и Javascript