arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобрана вёрстка кастомного слайдера в стиле Spotify: настройка Root (базовый шрифт в vw для fluid-вёрстки), хедер с навигацией, блок-лист в режиме Карусель с кастомными стрелками. По ходу — ответы на вопросы про Flex, отступы и работу с классами. Fluid-вёрстка — это когда всё пропорционально масштабируется под любой экран. Базовый шрифт в vw, остальные размеры в em — и сайт «тянется» без жёстких брейкпоинтов. Для слайдера в стиле Spotify важна точная настройка Gap между слайдами и Overflow для скрытия лишних карточек. Урок рассчитан на тех, кто знаком с базовым интерфейсом Taptop и хочет сверстать нетривиальный UI-паттерн. Понимание fluid-вёрстки и единиц em/vw ускорит усвоение материала.

Верстаем кастомный слайдер в стиле Spotify в Taptop

Нужен слайдер в стиле Spotify — горизонтальная прокрутка, кастомные стрелки, плавная анимация. Стандартный виджет не подходит по дизайну. Как сделать такой в Taptop?
Слайдер строится на виджете Block List с отключённой пагинацией и горизонтальным скроллом. Fluid-вёрстка: базовый размер шрифта в vw в Root, все размеры — в em. Один брейкпоинт вместо трёх-четырёх. Для всех, кто верстает кастомные слайдеры. После просмотра создаёшь слайдер с полным контролем над дизайном.
Тайминги видео
00:00 — Fluid-вёрстка: как работают vw, % и em — краткий разбор 05:00 — Root: базовый шрифт и размер в vw 10:00 — Хедер: логотип, навигация, глобальные классы 18:00 — Секция слайдера: структура и настройка виджета Блок-лист 26:00 — Слайдер: контент, тексты, изображения 33:00 — Итоговый результат и адаптация

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока