pvbk Sep 20 2019 at 21:52

Простой слайдер изображений на CSS и Javascript

7 min

151K

Website development*JavaScript*

Comments 18

b360124 Sep 20 2019 at 23:44

Интересно бы увидеть реализации без js. Только CSS + HTML, только хардкор )))

we1 Sep 21 2019 at 12:30

Да, я тоже почему-то ждал в статье именно этого результата. И даже знаю, что такое возможно, так как однажды пытался, но получилось что-то слишком корявое:
jsfiddle.net/7ocs925a

Там, как мне кажется, нужно еще добавить стрелки влево-вправо. А вот пролистывание клавишами без JS, кажется, сделать не получится. Ну и «карусель», чтобы после последнего запускалась первая, тоже сделать непонятно как. Хотя изначально радиокнопки все это предусматривают:
jsfiddle.net/wht6vjay/6

В общем, много чего надо допиливать, и у меня изначально идея была другая: не галерея картинок по кругу, а «карточка»: картинка+текст, то есть они предусматривают не прокрутку, а вдумчивое изучение, поэтому там цифры, чтобы легче было ориентироваться.

ivan386 Sep 21 2019 at 21:16

А вот пролистывание клавишами без JS, кажется, сделать не получится.

Странно. Я тоже на radio делал. У меня табом переключается.

we1 Sep 21 2019 at 22:05

Я это делал пару лет назад, там задача другая была, и я уже не помню деталей. В первом примере клавиши не работают, а во втором — стрелками можно листать. В обоих случаях радиокнопки.

ivan386 Sep 21 2019 at 22:43

Я понял почему у меня через таб работает. Radio тут вообще не участвует. У меня слайды это ссылки и таб просто прокручивает до следующего слайда.

ivan386 Sep 21 2019 at 00:15

А Javascript то где?

Kurochkin Sep 21 2019 at 22:20

Так в конце статье же, перед фразой про открытые источники изображений.

ivan386 Sep 21 2019 at 22:24

Я подозреваю что это не всё:

<script>new Sim(“first”); new Sim(“second”);</script>

pvbk Sep 22 2019 at 00:15

Код Javascript, а также HTML и CSS с результатом находятся во фрейме JSFiddle перед фразой про открытые источники изображений

ivan386 Sep 22 2019 at 00:48

У меня JSFiddle не отображается поэтому я даже ссылки на него не вижу. Его мне надо отдельно разрешать в плагинах.

JavaScript же можно под спойлером опубликовать как и CSS. Чтоб не лезть за этим на JSFiddle.

pvbk Sep 22 2019 at 02:10

JavaScript вставил

apapacy Sep 21 2019 at 10:45

Автор уже опубликовал скрипт карусели, который также использует только CSS и Javascript. Теперь...

Также вызвала вопрос эта первая фраза. Какие по-Вашему средства используют другие слайдеру? Ну и по-существу вопроса. В свое время разработал код вертикального листанция экранов. Все было очень просто. Но когда я попробовал протестировать на Андроиде ту меня ожидало разочарование. Не знаю как сейчас но на тот момент был баг андроида, который не генерировал событие при окончании touch и его пришлось реализовывать прослушиванием других событий что сразу сделало код глючным и сложным. Так что в популярный свайперах/слайдерах поддержка совместимости одно из главных преимуществ

pvbk Sep 21 2019 at 14:31

Имеется ввиду, что скрипт не использует библиотеки и плагины, например jQuery

pvbk Sep 21 2019 at 23:28

По видимому, баг исправлен. Карусель — пролистывание касанием работает устойчиво. Проверено на тел. Samsung J7, Android ver.8.1.0

apapacy Sep 22 2019 at 12:48

У меня андроид 7 планшет leanovo первый слайд свайпится с первого раза все последующие только со второго

pvbk Sep 22 2019 at 13:54

Скрипт написан только что и у автора нет большого опыта работы с мобильными устройствами, все настройки установлены “на глазок” (обработчик события touchmove). Попробуйте слегка изменить расстояние между точками касания и отпускания экрана — уменьшить до 10-12 пикс. (сейчас 15), а время прикосновения увеличить до 100-120 мс (сейчас 75). Это должно увеличить надёжность срабатывания.

maggg Sep 22 2019 at 18:46

Слайдер «только на CSS и JavaScript» — это сильно. :)
А я-то ожидал чего-то на Котлине и в докер-контейнере.

pepelsbey Sep 24 2019 at 01:16

Вашим слайдером невозможно пользоваться с клавиатуры (дивы вместо кнопок), ваш код местами битый из-за типографских кавычек. Я всё больше боюсь за Хабр, после таких статей. Пожалуйста, не надо больше, ведь кто-нибудь и правда возьмёт этот код.

Show the best of all time