В этом видео сделаем слайдер с 3D эффектом на Swiper слайдере (Swiper Coverflow). Напишем разметку, рассмотрим подключение swiper слайдера и необходимые параметры для настройка слайдера. Также уделим внимание кастомизации слайдера с помощью CSS переменных.
Архив с кодом из урока в Telegram канале: friZxyBulgNmYjE6 (пост за )
Конспект урока:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс “Создай свой первый сайт на HTML5 и CSS3“
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов:
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
💻 Курс “Frontend разработчик. JavaScript React“:
Обучение с наставником, 3 месяца, результат, гарантия.
💻 Курс “Разработка сайтов на PHP MySQL“:
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми:
💈 Вступайте в группу Вконтакте:
💈 Подписывайтесь на Telegram:
ТАЙМ КОДЫ:
00:00 Начало
00:44 Создание проекта
03:54 Подключение Swiper слайдера
07:16 CSS и JS настройки для слайдера
10:22 Настройки для coverflow 3D эффекта
12:02 Проверка слайдера
13:18 Фикс высоты для слайдов
14:11 Запрет на text-select внутри слайда
15:08 Кастомизация слайдера через CSS переменные
#HTML #CSS #верстка #WebCademy #ВебКадеми #html5 #css3 #вёрстка #карусель #swiper #slider #carousel #слайдер
24 views
6
0
4 weeks ago 00:04:02 53
3D ПАНЕЛИ ВЕЗДЕ!
4 weeks ago 00:10:21 853
Урок — Оживите 3d-окружение с помощью процедурной анимации. Часть 2 • 3ds Max | RUS
4 weeks ago 01:06:30 35
[Anna Veselova] Как начать чертить в КОМПАС 3D? Видео для АБСОЛЮТНЫХ новичков 2023 #компас3d #компас3dcнуля
4 weeks ago 00:10:45 71
⚡ 3D ТЕКСТ АНИМАЦИЯ В AFTER EFFECTS | ELEMENT 3D
4 weeks ago 00:03:43 434
Обзор — AI инструменты для постобработки • D5 Render | RUS
4 weeks ago 00:03:04 117
Бенчмарк Sanctuary от UNIGINE (2007)
4 weeks ago 00:17:40 415
Урок — Кинематографичные рендеры. Работа в связке Nuke + Unreal Engine 5 | RUS
4 weeks ago 00:00:17 23
3d-logo-sting
4 weeks ago 00:00:27 17
3d-kids-room-promo
4 weeks ago 00:00:35 123
3d-photo-slideshow
4 weeks ago 00:08:06 1
611992-21 - Use After Effects To Polish Your Animation - Unreal Engine 5 Pro ArchViz Project in 3 Hours
4 weeks ago 00:00:11 90
3d-logo-animation
4 weeks ago 00:01:33 7
KADETT ЗАТОЧНАЯ СИСТЕМА ⭐
4 weeks ago 00:00:29 28
multi-frame-3d-intro
4 weeks ago 00:00:29 2
Нейросети в действии
4 weeks ago 00:08:55 1.9K
Пинтерест теплая зимняя и домашняя одежда с вайлдберрис
4 weeks ago 00:01:20 100
Итоги конкурса №2
4 weeks ago 00:01:39 48
🌟 Игрушечный агент Джеймс Боб / Toy agent James Bob 🌟
4 weeks ago 00:00:30 1K
Nike Japan’s Air Max Day 3D Billboard // Nike Careers: Our Stories
4 weeks ago 00:47:55 1.1K
ИТОГИ конкурса концепт-артов для игры «Песнь Копья»
4 weeks ago 00:00:50 1
⚡ ЭФФЕКТИВНОЕ ОМОЛОЖЕНИЕ КОЖИ В ДОМАШНИХ УСЛОВИЯХ — 12 РЕЦЕПТОВ 🎯