3D эффект для слайдера Swiper Coverflow
В этом видео сделаем слайдер с 3D эффектом на Swiper слайдере (Swiper Coverflow). Напишем разметку, рассмотрим подключение swiper слайдера и необходимые параметры для настройка слайдера. Также уделим внимание кастомизации слайдера с помощью CSS переменных.
Архив с кодом из урока в Telegram канале: https://t.me/+friZxyBulgNmYjE6 (пост за 04.06.24)
Конспект урока: https://webcademy.ru/blog/1144/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: http://webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: https://webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": https://webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
https://webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: https://webcademy.ru/
💈 Вступайте в группу Вконтакте: https://vk.com/webcademy
💈 Подписывайтесь на Telegram: https://t.me/webcademynews
ТАЙМ КОДЫ:
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 переменные
Видео 3D эффект для слайдера Swiper Coverflow канала ВебКадеми | Юрий Ключевский
Архив с кодом из урока в Telegram канале: https://t.me/+friZxyBulgNmYjE6 (пост за 04.06.24)
Конспект урока: https://webcademy.ru/blog/1144/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: http://webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: https://webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": https://webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
https://webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: https://webcademy.ru/
💈 Вступайте в группу Вконтакте: https://vk.com/webcademy
💈 Подписывайтесь на Telegram: https://t.me/webcademynews
ТАЙМ КОДЫ:
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 переменные
Видео 3D эффект для слайдера Swiper Coverflow канала ВебКадеми | Юрий Ключевский
Показать
Комментарии отсутствуют
Информация о видео
4 июня 2024 г. 23:15:06
00:18:35
Другие видео канала
![10. Работа с HTML разметкой в jQuery. Курс по jQuery](https://i.ytimg.com/vi/uTHIkrPE_W0/default.jpg)
![04. jQuery методы выбора элементов. Курс по jQuery](https://i.ytimg.com/vi/j2cSjXYre3w/default.jpg)
![3. Figma для верстальщика. Знакомство с интерфейсом. Учимся работать с макетом](https://i.ytimg.com/vi/Hc96e1Cuy7c/default.jpg)
![Сайт на PHP. Админка, блог, интернет магазин с оплатой. Проект с курса по разработке сайтов на PHP.](https://i.ytimg.com/vi/93nsr7gpLK4/default.jpg)
![7. Портфолио. Бесплатный курс по верстке сайтов HTML CSS](https://i.ytimg.com/vi/rXn5cMwzQPY/default.jpg)
![13. Мобильная адаптация сайта под "Планшет". Бесплатный курс по верстке сайтов HTML CSS](https://i.ytimg.com/vi/kJS9z0TosIc/default.jpg)
![5. Шапка. Сброс стилей и подключение шрифтов. Бесплатный курс по верстке сайтов HTML CSS](https://i.ytimg.com/vi/KuplKOshVFo/default.jpg)
![Как установить LAMP с PHP на MacOS с помощью Docker за 10 минут](https://i.ytimg.com/vi/gwm033W0qEs/default.jpg)
![7. Видео обложка для сайта Плавная прокрутка. Уроки по верстке сайта Портфолио HTML CSS](https://i.ytimg.com/vi/vW5_u9UuwGo/default.jpg)
![03. Урок по jQuery селекторам. Курс по jQuery](https://i.ytimg.com/vi/w7mU5XvXB1c/default.jpg)
![09. Работа с атрибутами в jQuery. Курс по jQuery](https://i.ytimg.com/vi/Q-MhWcee2Bg/default.jpg)
![Строгий режим в JavaScript. Как включить и его особенности. 'use strict'; в JS](https://i.ytimg.com/vi/Lp7QUWhgXj8/default.jpg)
![11. Внутренние страницы. Стилизация. Бесплатный курс по верстке сайтов HTML CSS](https://i.ytimg.com/vi/kjFPwDGz6N8/default.jpg)
![08. jQuery работа с формой val. Курс по jQuery](https://i.ytimg.com/vi/WyOdFYXKwGg/default.jpg)
![14. Мобильная адаптация сайта под "Телефон". Бесплатный курс по верстке сайтов HTML CSS](https://i.ytimg.com/vi/WymxK9f0D5A/default.jpg)
![Верстка сайта для новичков. Часть 2. Pet Spa. HTML, CSS, скрипты, адаптивная верстка](https://i.ytimg.com/vi/G6HKBiaIQx4/default.jpg)
![12. Фавиконка. Бесплатный курс по верстке сайтов HTML CSS](https://i.ytimg.com/vi/NFdoH13md4w/default.jpg)
![15. Видеофон для шапки сайта. Бесплатный курс по верстке сайтов HTML CSS](https://i.ytimg.com/vi/sOJD97LKYEs/default.jpg)
![Первый урок на курсе "Frontend разработчик: JavaScript + React". 08.07.2024 г.](https://i.ytimg.com/vi/PDWnkco6Yyc/default.jpg)
![8. Контакты. Бесплатный курс по верстке сайтов HTML CSS](https://i.ytimg.com/vi/3m_h7PhG4A0/default.jpg)