Netflix-подобный слайдер — 3 варианта (CSS и JS)
Короткое введение
Слайдер в стиле Netflix — популярный приём интерфейса: горизонтальная лента карточек с увеличением и превью при наведении. Ниже приведены три рабочих реализации, которые вы можете скопировать, адаптировать и расширить.
Важно: изображения и примеры кода сохранены как в исходном материале; в продуктивной среде отдавайте приоритет оптимизации изображений и lazy-loading.
1. Слайдер с кнопками навигации (только CSS)
Этот вариант имитирует навигацию между «страницами» ленты с помощью якорных ссылок и CSS-грида. При наведении карточка увеличивается.
При наведении:
Используйте следующий HTML и CSS — код приведён полностью.
HTML Code
CSS Code
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background-color: #000;
}
h1 {
font-family: Arial;
color: red;
text-align: center;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100%);
overflow: hidden;
scroll-behavior: smooth;
}
.wrapper section {
width: 100%;
position: relative;
display: grid;
grid-template-columns: repeat(5, auto);
margin: 20px 0;
}
.wrapper section .item {
padding: 0 2px;
transition: 250ms all;
}
.wrapper section .item:hover {
margin: 0 40px;
transform: scale(1.2);
}
.wrapper section a {
position: absolute;
color: #fff;
text-decoration: none;
font-size: 6em;
background: black;
width: 80px;
padding: 20px;
text-align: center;
z-index: 1;
}
.wrapper section a:nth-of-type(1) {
top: 0;
bottom: 0;
left: 0;
background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, black 100%);
}
.wrapper section a:nth-of-type(2) {
top: 0;
bottom: 0;
right: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, black 100%);
}
@media only screen and (max-width: 600px) {
a.arrow__btn {
display: none;
}
}2. Слайдер с горизонтальной полосой прокрутки (только CSS)
Этот пример использует горизонтальную прокрутку браузера и поведение hover для появления деталей. Подходит для простых страниц, где не нужен JavaScript.
При наведении:
HTML Code
Netflix Carousel
Pure CSS Netflix Video Carousel
Top Gear
Top Gear
Top Gear
Top Gear
Top Gear
Top Gear
Top Gear
CSS Code
body,
html {
padding: 0 10px;
margin: 0;
background: #0e0f11;
color: #ecf0f1;
font-family: 'Open Sans', sans-serif;
min-height: 100vh;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
a:link,
a:hover,
a:active,
a:visited {
transition: color 150ms;
color: #95a5a6;
text-decoration: none;
}
a:hover {
color: #7f8c8d;
text-decoration: underline;
}
.contain {
width: 100%;
}
.row {
overflow: scroll;
overflow-y: hidden;
width: 100%;
}
.row__inner {
transition: 450ms transform;
font-size: 0;
white-space: nowrap;
margin: 70.3125px 0;
padding-bottom: 10px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 140.625px;
margin-right: 10px;
font-size: 20px;
cursor: pointer;
transition: 450ms all;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 140.625px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:after {
margin-top: -25px;
margin-left: -25px;
width: 50px;
height: 50px;
border: 3px solid #ecf0f1;
line-height: 50px;
text-align: center;
border-radius: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.tile__details:before {
content: '▶';
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
transform: scale(1.5);
opacity: 1;
}
.tile:hover~.tile {
transform: translate3d(125px, 0, 0);
}3. Слайдер с кнопками навигации (CSS + JavaScript)
Гибридный вариант позволяет программно прокручивать ленту, показывать/скрывать стрелки и корректно обрабатывать события колесика мыши.
При наведении:
HTML Code
Netflix Carousel
Going In Style
Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.
Boss Baby
Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.
CSS Code
body {
background-color: #343434;
margin: 0;
padding: 0;
margin: auto;
}
div.items {
white-space: nowrap;
flex-flow: row nowrap;
justify-content: space-between;
overflow: hidden;
display: flex;
align-self: center;
}
div.items:hover .item {
opacity: 0.3;
}
div.items:hover .item:hover {
opacity: 1;
}
div.control-container {
height: 300px;
position: absolute;
width: 100%;
overflow: hidden;
box-sizing: border-box;
}
div.container {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
min-height: 300px;
position: relative;
width: 100%;
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
/* ...остальной CSS как в исходнике... */JavaScript Code
function MouseWheelHandler(e, element) {
var delta = 0;
if (typeof e === 'number') {
delta = e;
} else {
if (e.deltaX !== 0) {
delta = e.deltaX;
} else {
delta = e.deltaY;
}
e.preventDefault();
}
element.scrollLeft -= (delta);
}
window.onload = function() {
var carousel = {};
carousel.e = document.getElementById('carousel');
carousel.items = document.getElementById('carousel-items');
carousel.leftScroll = document.getElementById('left-scroll-button');
carousel.rightScroll = document.getElementById('right-scroll-button');
carousel.items.addEventListener("mousewheel", handleMouse, false);
carousel.items.addEventListener("scroll", scrollEvent);
carousel.leftScroll.addEventListener("click", leftScrollClick);
carousel.rightScroll.addEventListener("click", rightScrollClick);
setLeftScrollOpacity();
setRightScrollOpacity();
function handleMouse(e) {
MouseWheelHandler(e, carousel.items);
}
function leftScrollClick() {
MouseWheelHandler(100, carousel.items);
}
function rightScrollClick() {
MouseWheelHandler(-100, carousel.items);
}
function scrollEvent(e) {
setLeftScrollOpacity();
setRightScrollOpacity();
}
function setLeftScrollOpacity() {
if (isScrolledAllLeft()) {
carousel.leftScroll.style.opacity = 0;
} else {
carousel.leftScroll.style.opacity = 1;
}
}
function isScrolledAllLeft() {
if (carousel.items.scrollLeft === 0) {
return true;
} else {
return false;
}
}
function isScrolledAllRight() {
if (carousel.items.scrollWidth > carousel.items.offsetWidth) {
if (carousel.items.scrollLeft + carousel.items.offsetWidth === carousel.items.scrollWidth) {
return true;
}
} else {
return true;
}
return false;
}
function setRightScrollOpacity() {
if (isScrolledAllRight()) {
carousel.rightScroll.style.opacity = 0;
} else {
carousel.rightScroll.style.opacity = 1;
}
}
}Дополнения и лучшие практики
Доступность (чеклист)
- Кнопки навигации: добавьте aria-label и tabindex.
- Картинки: используйте осмысленные alt-атрибуты (если изображение — контент, а не декоративное).
- Управление клавиатурой: обеспечьте фокусировку на карточках, поддержите стрелки для прокрутки.
- Размеры и контраст: текстовые оверлеи должны соответствовать WCAG по контрасту.
Когда этот подход не подходит
- Большое количество карточек (тысячи): нужно ленивое подгружение и виртуализация.
- Сильная динамическая подгрузка контента: лучше управлять DOM из JavaScript/фреймворка.
- Требуется поддержка старых браузеров без полифилов (например, отсутствие object-fit или scroll-behavior).
Альтернативы
- Slick, Swiper — готовые библиотеки со множеством опций и адаптивностью.
- Реализация на React/Vue с виртуализацией (react-window) для больших наборов данных.
- CSS Scroll Snap для более «нативного» поведения прокрутки.
Критерии приёмки
- Навигационные стрелки видны/скрываются корректно при достижении краёв.
- Эффект hover масштабирует карточку без смещения соседних карточек критично.
- Управление клавиатурой и скринридеры предоставляют базовую навигацию.
- Подгрузка изображений не блокирует рендер основного контента.
Мини‑методология для внедрения (шаги)
- Выберите вариант: CSS-only или JS.
- Подготовьте оптимизированные изображения (WebP/AVIF, responsive).
- Реализуйте базовый HTML/CSS и протестируйте макет.
- Добавьте доступность (ARIA, tabindex).
- Добавьте lazy-loading и тесты производительности.
- Тестируйте на мобильных устройствах, планшетах и в популярных браузерах.
Шаблон проверки ролей (быстрый чеклист)
- Дизайнер: утверждённые размеры карточек, состояния hover/active.
- Фронтенд: верстка и тестирование производительности.
- QA: сценарии прокрутки, клавиатурная навигация, адаптивность.
- PM: подтверждение критериев приёмки и доступности.
Краткий глоссарий (1 строка)
- Карточка: визуальный блок с изображением и метаданными.
- Hover: состояние при наведении курсора.
- Scroll snap: CSS-механизм «прилипания» к элементам при прокрутке.
Резюме
- Три варианта слайдера: CSS-only с кнопками, CSS-only с прокруткой и гибрид с JavaScript.
- Для простых страниц подойдёт вариант без JS; для контроля поведения и UX лучше использовать JavaScript.
- Обязательно учтите доступность, lazy-loading и оптимизацию изображений перед релизом.
Важно: код в статье распространяется по MIT License — проверяйте лицензию сторонних изображений и шрифтов перед коммерческим использованием.
Автор
Редакция
Похожие материалы
Инфраструктура
RDP: полный гид по настройке и безопасности
Гайды
Android как клавиатура и трекпад для Windows
Документы
Советы и приёмы для работы с PDF
Фото
Calibration в Lightroom Classic: как и когда использовать
iOS
Отключить Siri Suggestions на iPhone
Office