Владимир Потемкин @pvbk
Исследователь
Ant-карусель на CSS и Javascript
![](http://habrastorage.org/r/w48/getpro/habr/avatars/d9d/df8/953/d9ddf8953ad879e6637dd19be380abfb.png)
см. диалоги
0
ПосмотретьAnt-карусель на CSS и Javascript
![](http://habrastorage.org/r/w48/getpro/habr/avatars/d9d/df8/953/d9ddf8953ad879e6637dd19be380abfb.png)
ответил в диалогах
0
ПосмотретьПростой слайдер изображений на CSS и Javascript
![](http://habrastorage.org/r/w48/getpro/habr/avatars/d9d/df8/953/d9ddf8953ad879e6637dd19be380abfb.png)
Скрипт написан только что и у автора нет большого опыта работы с мобильными устройствами, все настройки установлены “на глазок” (обработчик события touchmove). Попробуйте слегка изменить расстояние между точками касания и отпускания экрана — уменьшить до 10-12 пикс. (сейчас 15), а время прикосновения увеличить до 100-120 мс (сейчас 75). Это должно увеличить надёжность срабатывания.
0
ПосмотретьПростой слайдер изображений на CSS и Javascript
![](http://habrastorage.org/r/w48/getpro/habr/avatars/d9d/df8/953/d9ddf8953ad879e6637dd19be380abfb.png)
JavaScript вставил
+1
ПосмотретьПростой слайдер изображений на CSS и Javascript
![](http://habrastorage.org/r/w48/getpro/habr/avatars/d9d/df8/953/d9ddf8953ad879e6637dd19be380abfb.png)
Код Javascript, а также HTML и CSS с результатом находятся во фрейме JSFiddle перед фразой про открытые источники изображений
0
ПосмотретьПростой слайдер изображений на CSS и Javascript
![](http://habrastorage.org/r/w48/getpro/habr/avatars/d9d/df8/953/d9ddf8953ad879e6637dd19be380abfb.png)
По видимому, баг исправлен. Карусель — пролистывание касанием работает устойчиво. Проверено на тел. Samsung J7, Android ver.8.1.0
+1
ПосмотретьAnt-карусель на CSS и Javascript
![](http://habrastorage.org/r/w48/getpro/habr/avatars/d9d/df8/953/d9ddf8953ad879e6637dd19be380abfb.png)
В текст программы внесены изменения. Для предотвращения кратного срабатывания события touchmove введен оператор stTime=0 (Line 173). Добавлена вспомогательная переменная mvTime.
0
ПосмотретьПростой слайдер изображений на CSS и Javascript
![](http://habrastorage.org/r/w48/getpro/habr/avatars/d9d/df8/953/d9ddf8953ad879e6637dd19be380abfb.png)
Имеется ввиду, что скрипт не использует библиотеки и плагины, например jQuery
+1
ПосмотретьAnt-карусель на CSS и Javascript
![](http://habrastorage.org/r/w48/getpro/habr/avatars/d9d/df8/953/d9ddf8953ad879e6637dd19be380abfb.png)
Исправил
0
ПосмотретьAnt-карусель на CSS и Javascript
![](http://habrastorage.org/r/w48/getpro/habr/avatars/d9d/df8/953/d9ddf8953ad879e6637dd19be380abfb.png)
Главное не форма, главное содержание. Так гласит диалектика, которую теперь не изучают
0
ПосмотретьAnt-карусель на CSS и Javascript
![](http://habrastorage.org/r/w48/getpro/habr/avatars/d9d/df8/953/d9ddf8953ad879e6637dd19be380abfb.png)
Ok
0
ПосмотретьAnt-карусель на CSS и Javascript
![](http://habrastorage.org/r/w48/getpro/habr/avatars/d9d/df8/953/d9ddf8953ad879e6637dd19be380abfb.png)
Применение transition: margin связано с тем, что приходится не только сдвигать элементы, но и переставлять их. Рассмотрим сдвиг контейнера с элементами вправо. Последний элемент в линейке клонируется и подставляется перед первым элементом. Одновременно свойство margin-left контейнера уменьшается до отрицательного значения, равного ширине элемента. Последний элемент, вставленный перед первым, остаётся невидимым. Далее линейка элементов медленно сдвигается (прокручивается) вправо и последний элемент становится первым. Свойство margin-left становится равным нулю, как и было до перестановки.
0
ПосмотретьAnt-карусель на CSS и Javascript
![](http://habrastorage.org/r/w48/getpro/habr/avatars/d9d/df8/953/d9ddf8953ad879e6637dd19be380abfb.png)
0
ПосмотретьИнформация
- В рейтинге
- Не участвует
- Откуда
- Санкт-Петербург, Санкт-Петербург и область, Россия
- Дата рождения
- Зарегистрирован
- Активность