46. HTML, CSS, JavaScript - Image Slider. Адаптивный и бесконечный слайдер

🟢 Делаем простой, адаптивный и бесконечный слайдер изображений. Слайдеры есть почти в каждом приложении, и пример данного слайдера показывает фундаментальные вещи для реализации. Плюс ко всему кайфанете от процесса. Используем только нативные HTML, CSS, JS и свои руки. ➡️ таймлайн ➡️ 00:00 старт 01:27 обзор слайдера 02:29 разметка HTML 03:51 базовые стили CSS 05:20 отрисовка изображений JS 09:20 стили для img 10:53 симуляция бесконечности JS 12:25 initSlider 16:47 логика кнопок 25:02 баг анимации при ресайзе окна 26:31 финальные стили CSS 28:10 константа для анимации 29:32 финиш ▶ ПОДДЕРЖАТЬ можно тут - Boosty:
▶ Telegram:
▶ GitHub:
▶ Linkedin:   / kolotilshikov   ▶ Графический дизайн и анимация:
📎 PDF ФАЙЛ с кодом к каждому уроке в телеграм канале 📎 ⚡️ вкусняхи ⚡️ 🔑 Курс по GIT (одно видео):    • Полный КУРС 2024 по GIT. Команды, терминал...   🔑 CSS Flexbox (2 видео):    • 47. Frontender[1.0] FLEXBOX (флексбокс) те...   🔑 CSS Grid (2 видео):    • 78. Frontender[1.0] CSS GRID | Теория, Пра...   🔑 Препроцессоры SCSS (2 видео):    • 82. Frontender[1.0] ПРЕПРОЦЕССОРЫ SASS | S...   🔑 SVG, svg-спрайты (2 видео):    • 53. Frontender[1.0] Векторная графика SVG ...   🔑 1 уровень - Верстка макета (8 видео):    • 57. Frontender[1.0] Верстка первого макета...   🔑 2 уровень - Верстка макета (8 видео):    • 70. Frontender[1.0] ВЕРСТКА второго макета...   🔑 3 уровень - Верстка макета (10 видео):    • 84. Frontender[1.0] ВЕРСТКА Макета. Обзор ...   ⚙️ Курс Frontender[1.0] разделен на 3 модуля: 1) HTML, CSS, SCSS, БЭМ, Flexbox, Grid, Bootstrap, GIT, FIGMA, верстка 3 макетов (100 уроков); 2) JavaScript, решение задач, написание нескольких приложений; 3) React, Typescript, Redux написание полноценного приложения; HTML, CSS, JavaScript - Image Slider. Адаптивный и бесконечный слайдер 📢 Автор: Дмитрий Колотильщиков #js #frontend #javascript