Слайдер картинок с автоматической прокруткой без JavaScript [only css]

Привет, не так давно я показывал, как можно создать слайдер без javascript, в принципе он был нормальный не хватало лишь стрелочек для переключения слайда. Ну или автоматического переключения – в целом если стрелочки я сделать без JavaScript не могу, то переключение автоматическое без всяких проблем сделать можно.

В прошлом своем мосте я делал калькулятор – получился практически полноценный удобный калькулятор, который может умножать, делить, прибавлять и отнимать. Вот и сейчас я решил заснять видео, в котором я показал, как по-быстрому сделать слайдер, который будет автоматически переключать слайды.

Вот само видео:

Хочу сознаться – я мало верю, что такой слайдер понадобится тебе на полноценном приносящем доходы сайте, скорее всего в чем я больше уверен ты используешь саму технологию для других вещей. Каких именно я думаю ты придумаешь в плоть до того, что анимировать стрелочку, на сайте которая показывает пользователю спуститься ниже.

Кроме того, большие вещи делаются с малого – потому вдруг у тебя возникла идея сделать крутой масштабный слайдер только за счет того, что я показал тебе на сколько просто реализовать такое.

Какие технологии я использовал для реализации слайдера без JavaScript с автопрокруткой?

В целом все по стандарту:

  • IDE – phpStorm;
  • Более быстрое печать html тегов – emmet, во-первых, он встроен в phpStorm, а во-вторых я делал небольшую инструкцию по emmet.
  • @keyframes – правило css которое позволяет задать кадры для анимации чего либо. Очень крутая и очень простая вещь.
  • SCSS – это препроцессор css, который позволяет упростить работу с css.
  • Prepros – позволяет быстро компилировать scss и less файлы ну и в лайв режиме отображать все изменения.
  • Badicam для записи видео, а вот за небольшой монтаж отвечал Adobe Premiere – но это чисто для справки.

Кстати, если тебе лень писать вместе со мной код, то ничего страшного, весь код к слайдеру с автоматической прокруткой ты можешь найти по это ссылке, ну а код скачать здесь!

 В общем если я был тебе полезен, а я уверен, что хоть как-то был полезен, то не забудь сделать репост, ну или просто скажи спасибо – это меня сильно замотивирует.

Оставьте комментарий