Верстка Organic Juicy Co. Часть 8. Программируем слайдер со стрелками на чистом js.

Organic juicy - это серия видеороликов, в которой мы верстаем и адаптируем с помощью гридов макет с очень интересной сеткой и визуальной составляющей (лёгкий, летний и яркий макет с фруктами). Мы реализуем эффектную анимацию в шапке. Применим знания БЭМ и запрограммируем на чистом js два разных слайдера. И всё это с подробными объяснениями каждого действия. Вёрстка сайта позволит нам попрактиковать знания html, css, javascript, grid, бэм, адаптив, работа в редакторе кода Visual Studio Code. В данном видео я отвечу на следующие вопросы: ► Как сделать на сайте слайдер? Как запрограммировать слайдер на чистом js? Как сделать на сайте карусель? Как зациклить слайдер и показывать после последнего элемента первый? ► Как сделать переключение фотографий по клику на стрелки на сайте? ► Где искать картинки для сайта? ► Как найти и исправить баги на сайте? ► Как в js найти элемент на странице? Как получить элемент в js. Как получить список элементов в javascript? Как найти группу элементов в js? ► Как вызвать функцию при клике на элемент на сайте? Как при клике на кнопку делать действия в js? Как передать аргументы в обработчике событий? ► Как перебрать Node list в js? Как перебрать элементы с помощью forEach? 🍏 Ссылка на полный плейлист верстки данного макета Organic Juicy Co: 🔵 Ссылка на плейлист верстки макета Velocity с очень подробными объяснениями: 👨‍💻 Мой список плагинов и расширений для редактора кода VS Code: 📚 Материалы для верстки сайта и макет сайта здесь: 🎁 Готовый код с уроков, а также макет из фигмы с визуальной разметкой можно получить, написав в личные сообщения группы ВК слово “код“. Ищи школу WEB PRO в соц. сетях: 🚀 Группа ВК: 🔥 Телеграм канал: 💬 Телеграм чат для общения: Pn0AlTS0yVlhOGYy Ссылка на дизайнера макета: Таймкоды: 00:00 Что нас ждёт в этом видео? 01:03 Правим баги на сайте 05:30 Ищем картинки для слайдов на фотостоке 09:40 Продолжаем править баги на сайте 17:58 Начало программирования слайдера. Алгоритм работы. 18:50 Получаем необходимые элементы со страницы. 24:38 Создание индекса текущего слайда. 26:45 Создаем слушатели событий и вешаем их на стрелки слайдера. 31:55 Создаем функцию показа нового слайда. 47:50 Вызываем функцию при загрузке страницы. 50:33 Что будет в следующей части видео? Начни путь веб-разработчика уже сегодня! С вами был Никита Щегольков, школа веб-разработки Веб Про. Данные видеоуроки были бы интересно всем, кто ищет: верстка сайта с нуля, адаптивная верстка сайта, верстка сайта для начинающих. #organic #webpro #вебпро #js #верстка #версткасайта #javascript #слайдер #созданиесайта #каксоздатьсайт #чистыйjs #программированиенаjs #css #html #никитащегольков