Верстка 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 #никитащегольков
2 views
11
3
6 months ago 01:39:26 1
Верстка сайта для начинающих. Подробное объяснения. Часть 1 Подготовка и верстка шапки на HTML и CSS
10 months ago 00:20:18 1
FastAPI - Верстка с Jinja. Как визуализировать API #12
12 months ago 00:43:01 1
#3 Верстка сайта с нуля | Верстка сайта для начинающих
12 months ago 01:00:57 1
#1 Верстка сайта с нуля | Верстка сайта для начинающих