BITSPARK / Статьи / Дизайн и элементы сайта

Слайдер на сайте: что это и что проверить при приёмке

Коротко: слайдер на сайте в этой статье - компонент, который web.dev и MDN называют carousel, по-русски карусель; слова slider для него на этих страницах нет. web.dev определяет карусель как компонент интерфейса, который показывает содержимое по принципу слайд-шоу. Страница web.dev о каруселях описывает, где такой компонент уместен, почему автосмену слайдов она не советует и что проверить в навигации, тексте и скорости загрузки. Критерий WCAG 2.2.2 по рабочей версии редакторов описывает механизм, которым пользователь приостановит, остановит или скроет содержимое, которое запускается само, движется дольше пяти секунд и показано рядом с другим содержимым.

Ниже: что такое слайдер, из чего он состоит, что web.dev пишет о его уместности, автосмене, кнопках, тексте на слайде и скорости, что говорит критерий 2.2.2, какие вопросы задать подрядчику до дизайна и что проверить при приёмке.

Страницы источников открыты 06.10.2026. web.dev и MDN - материалы для разработчиков: стандарта и нормативного акта в них нет, и слово должен в нашем переводе передаёт английское should: это рекомендация страницы. Страницы на английском: цитаты даны в оригинале, перевод наш.

Критерий WCAG 2.2.2 прочитан на копии w3c.github.io. Это рабочая версия редакторов, на странице стоит пометка «This is an unpublished editor's draft that might include content that is not finalized.» Перевод наш: это неопубликованный черновик редакторов, он может содержать незавершённое содержимое.

Код, библиотеки, конструкторы, CSS-свойства и инструменты измерения скорости не разбираются. Примеры вымышленные: мебельная мастерская с сайтом example.ru и главной страницей из пяти слайдов.

Что такое слайдер на сайте?

Коротко: web.dev определяет карусель (carousel) как компонент интерфейса, который показывает содержимое по принципу слайд-шоу. MDN пишет, что карусели в типичном случае (typically) имеют вид прокручиваемой области с несколькими элементами. Словом slider этот компонент ни один из двух источников не называет, поэтому в статье слайдер и карусель значат одно и то же.

Слово слайдер из запроса, макета или технического задания в этой статье относится к компоненту, который web.dev и MDN называют carousel. Слова slider для этого компонента на обеих страницах нет, поэтому и сравнения слайдера с каруселью в источниках нет. Определение дано на странице web.dev о каруселях, последнее обновление которой по пометке внизу страницы 2021-01-26.

«A carousel is a UX component that displays content in slideshow-like manner.» Перевод наш: карусель - компонент пользовательского интерфейса, который показывает содержимое по принципу слайд-шоу.

Следом страница пишет, что карусели могут листаться сами («autoplay») или вручную пользователем. MDN в руководстве о каруселях, изменённом по пометке страницы 28 января 2026 года, перечисляет, что может лежать внутри такой области.

«They typically take the form of a scrolling content area containing several items, such as presentation slides, ads, headline news stories, or key product features.» Перевод наш: в типичном случае они имеют вид прокручиваемой области с несколькими элементами, такими как слайды презентации, реклама, главные новости или ключевые свойства товара.

Баннер на первом экране в значении блока из нескольких слайдов - тот же компонент. Рекламные баннеры как рекламные площадки в статье не рассматриваются.

Страница web.dev называет, для чего карусели используют на главных страницах: по её оценке, «most frequently used to display images, products, and promotions on homepages». Перевод наш: чаще всего используются для показа изображений, товаров и рекламных предложений на главных страницах. Счёта и долей на странице нет, это её оценка.

Из чего состоит слайдер?

Коротко: MDN описывает типичную карусель как область с несколькими элементами, в навигацию которой, по словам страницы, обычно (usually) входят кнопки назад и вперёд и маркеры, а переходить между слайдами можно нажатием на кнопки или жестом смахивания. web.dev добавляет автосмену, которой у карусели может не быть: карусели могут листаться сами или вручную.

В таблице каждая строка опирается на одну из двух страниц: web.dev «Best practices for carousels» (перевод наш: Лучшие практики для каруселей) и MDN «Creating CSS carousels».

Часть слайдераЧто сказаноСтраница
СлайдыMDN: прокручиваемая область с несколькими элементами, например слайды презентации, реклама, новости, ключевые свойства товараMDN, Creating CSS carousels
Кнопки назад и вперёдMDN называет их scroll buttons и пишет «Generally "previous" and "next" buttons or links» (перевод наш: в общем случае кнопки или ссылки назад и вперёд)MDN, Creating CSS carousels
МаркерыMDN называет их scroll markers: ряд значков-кнопок или значков-ссылок, каждый отвечает одному или нескольким элементамMDN, Creating CSS carousels
ЖестMDN: по элементам можно переходить нажатием на кнопки или жестом swiping, то есть смахиванием. web.dev: на телефоне жесты смахивания поддерживают вместе с кнопкамиMDN, Creating CSS carousels; web.dev, Best practices for carousels
ПостраничностьMDN: ключевое свойство карусели - pagination, элементы воспринимаются как отдельные порции содержимогоMDN, Creating CSS carousels
Автосменаweb.dev: карусели могут листаться сами («autoplay») или вручнуюweb.dev, Best practices for carousels

Названия кнопки назад и вперёд и маркеры - наш перевод терминов MDN. Перечень кнопок и маркеров MDN вводит словами «The navigation usually includes» (перевод наш: навигация обычно включает), доли страница не называет. Пример: на главной example.ru пять слайдов с мебелью, под ними пять точек-маркеров, на краях две стрелки. В терминах MDN точки - это scroll markers, стрелки - scroll buttons, а каждый слайд - один элемент области.

Где web.dev считает карусель уместной, а где нет?

Коротко: web.dev пишет, что карусели хорошо работают там, где нет места по вертикали для дополнительного содержимого, и называет пример: страницы товаров. Там же описаны риски: карусель могут принять за рекламу, а сама она может превратиться в свалку (dumping ground) неэффективного содержимого. Страница советует оценивать и проверять эффект карусели.

Страница web.dev в разделе «Product best practices» (перевод наш: Практика для продукта) начинает с условия, при котором карусель уместна.

«Carousels work well in situations where using additional vertical space to display additional content is not an option. Carousels on product pages are often a good example of this use case.» Перевод наш: карусели хорошо работают там, где использовать дополнительное место по вертикали для показа дополнительного содержимого нельзя. Карусели на страницах товаров нередко хороший пример такого случая.

Слова «often» и «work well» - оценки автора страницы, доли случаев она не называет. Следом страница называет два риска, и первый из них связан с тем, как посетители воспринимают такие блоки.

«Carousels, particularly if they contain promotions or advance automatically, are easily mistaken for advertisements by users.» Перевод наш: карусели, особенно если в них есть рекламные предложения или они листаются сами, пользователи легко принимают за рекламу.

Источник ссылается на явление «banner blindness» (баннерная слепота, перевод наш): пользователи склонны игнорировать рекламу. Цифр о баннерной слепоте на странице нет, в статье их тоже нет. Страница называет и второй риск, который касается договорённостей внутри компании и приоритетов бизнеса.

«Carousels are often used to placate multiple departments and avoid making decisions about business priorities. As a result, carousels can easily turn into a dumping ground for ineffective content.» Перевод наш: карусели нередко используют, чтобы успокоить несколько отделов и не принимать решений о приоритетах бизнеса. В итоге карусель легко превращается в свалку неэффективного содержимого.

В конце раздела страница советует проверять догадки. По её словам, влияние карусели на бизнес, особенно на главной странице, нужно оценивать и тестировать. Помогает в этом показатель кликов по каруселям. Цитата страницы: «Carousel clickthrough rates can help you determine whether a carousel and its content is effective.» Перевод наш: показатели кликов по каруселям помогут определить, эффективны ли карусель и её содержимое; значений показателя страница не приводит.

Нужна ли слайдеру автоматическая смена слайдов?

Коротко: под заголовком «Don't use autoplay» (перевод наш: Не используйте автосмену) web.dev пишет, что автосмена редко бывает хорошим выбором, и называет две причины. Если автосмена нужна, страница советует отключать её при наведении курсора и увеличивать время показа слайда с большим объёмом текста.

По странице, первая причина звучит так: «on-screen animations tend to distract users and move the eyes away from more important content» (перевод наш: анимации на экране склонны отвлекать пользователей и уводить взгляд от более важного содержимого). Вторая причина: «users often associate animations with ads» (перевод наш: пользователи нередко связывают анимацию с рекламой), и поэтому, по словам страницы, автоматически листающиеся карусели они игнорируют.

«Thus, it's rare that autoplay is a good choice.» Перевод наш: поэтому автосмена редко бывает хорошим выбором.

Дальше страница разбирает два случая. Если содержимое важно, отсутствие автосмены даёт ему больше внимания. Если неважно, автосмена отвлекает от более важного. Страница добавляет: «People read at different speeds, so it's rare that a carousel consistently transitions at the "right" time for different users.» Перевод наш: люди читают с разной скоростью, поэтому карусель редко стабильно переключается в подходящее для разных пользователей время.

«If you must use autoplay, autoplay should be disabled on user hover. In addition, the slide transition rate should take slide content into account - the more text that a slide contains, the longer it should be displayed on screen.» Перевод наш: если автосмену нельзя убрать, её нужно отключать при наведении курсора. Вдобавок скорость смены слайдов должна учитывать содержимое: чем больше текста на слайде, тем дольше он должен оставаться на экране.

Совет относится к наведению курсора. О телефоне в нём ничего нет, и как автосмена должна останавливаться на телефоне, источник не называет, поэтому это вопрос к подрядчику.

Что говорит критерий WCAG 2.2.2 о движущемся содержимом?

Коротко: критерий 2.2.2 «Pause, Stop, Hide» помечен уровнем A. По рабочей версии редакторов, если движущаяся информация запускается автоматически, длится больше пяти секунд и показана вместе с другим содержимым, должен быть механизм, которым пользователь приостановит, остановит или скроет её, с исключением для существенного движения. Слова carousel на странице нет: относится ли конкретный слайдер к критерию, решает проверка по тексту критерия.

WCAG - Web Content Accessibility Guidelines, рекомендации W3C по доступности веб-содержимого. Страница называется «Understanding Success Criterion 2.2.2: Pause, Stop, Hide | WAI | W3C», то есть это пояснение к критерию. Критерий на ней помечен «Pause, Stop, Hide (Level A)» (перевод наш: Пауза, остановка, скрытие, уровень A), то есть уровнем A. Формулировка для движущегося, мигающего и прокручивающегося содержимого такая.

«For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential» Перевод наш: для любой движущейся, мигающей или прокручивающейся информации, которая (1) запускается автоматически, (2) длится больше пяти секунд и (3) показана вместе с другим содержимым, есть механизм, позволяющий пользователю приостановить, остановить или скрыть её, если только движение, мигание или прокрутка не входят в деятельность, где они существенны.

Для автоматически обновляемого содержимого критерий формулирует отдельное условие.

«For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.» Перевод наш: для любой автоматически обновляемой информации, которая (1) запускается автоматически и (2) показана вместе с другим содержимым, есть механизм, позволяющий пользователю приостановить, остановить или скрыть её либо управлять частотой обновления, если только автообновление не входит в деятельность, где оно существенно.

В этом условии нет пяти секунд. В пояснении страница объясняет это так: «there is no five second exception for auto-updating». Перевод наш: для автообновления исключения в пять секунд нет.

В списке времязависимого содержимого на странице названы «auto-advancing presentations and messages» (презентации и сообщения, которые листаются сами, перевод наш). Слова carousel и слайдер на странице не встречаются, поэтому решение для конкретного блока принимают по тексту критерия.

Пояснение уточняет, что считается приостановкой. Если анимация останавливается, только пока на ней стоит фокус (выбранный сейчас элемент страницы), и снова идёт, когда фокус уходит, это не считается механизмом приостановки. Вывод автора для вопроса подрядчику: если слайдер листается сам, спросите, есть ли кнопка, которая останавливает смену слайдов.

Как слайдер должен переключаться?

Коротко: web.dev даёт четыре совета по навигации: заметные и удобные для нажатия кнопки, индикатор общего числа слайдов и положения посетителя среди них, жесты смахивания на телефоне вдобавок к кнопкам и другой путь к содержимому, на которое ведут слайды.

Раздел страницы web.dev называется «Navigation best practices» (перевод наш: Практика навигации), и первый совет в нём - заметные кнопки.

«Carousel navigation controls should be easy to click and highly visible. This is something that is rarely done well - most carousels have navigation controls that are both small and subtle.» Перевод наш: кнопки управления каруселью должны быть удобными для нажатия и хорошо заметными. Это редко делают хорошо - у большинства каруселей кнопки управления одновременно маленькие и малозаметные.

Там же пример: стрелка, хорошо видная на тёмном фоне, на светлом может быть плохо видна, поэтому один цвет кнопок может не подойти для всех слайдов. Второй совет страницы - показать посетителю, где он находится среди слайдов.

«Carousel navigation controls should provide context about the total number of slides and the user's progress through them.» Перевод наш: кнопки управления каруселью должны показывать общее число слайдов и продвижение пользователя по ним.

По словам страницы, такой индикатор помогает перейти к нужному слайду и понять, какое содержимое уже просмотрено. Третий совет касается телефона, а четвёртый - содержимого, на которое ведут слайды.

«On mobile, swipe gestures should be supported in addition to traditional navigation controls (such as on screen buttons).» Перевод наш: на мобильных устройствах жесты смахивания должны поддерживаться вдобавок к привычным элементам управления, например кнопкам на экране.

«Because it's unlikely that most users will engage with all carousel content, the content that carousel slides link to should be accessible from other navigation paths.» Перевод наш: поскольку маловероятно, что большинство пользователей заинтересуется всем содержимым карусели, содержимое, на которое ведут слайды, должно быть доступно по другим путям навигации.

Для заказчика это значит: каждый слайд ведёт на страницу, и туда должен вести ещё один путь, например меню или ссылка в каталоге. Этот вывод сделан автором статьи из слов страницы, в самой странице его нет.

Почему текст не вшивают в картинку слайда?

Коротко: web.dev в разделе «Keep text and images separate» (перевод наш: Держите текст и изображения отдельно) называет вшитый в изображение текст плохим для доступности, локализации (адаптации под другие языки) и сжатия. Для слайда страница советует краткость: на привлечение внимания пользователя у слайда лишь доля секунды.

Страница пишет: «Carousel text content is often "baked into" the corresponding image file, rather than displayed separately using HTML markup.» Перевод наш: текст карусели нередко вшит в соответствующий файл изображения вместо того, чтобы выводиться отдельно разметкой HTML. HTML-разметка - это код самой страницы, который браузер получает при открытии страницы.

«This approach is bad for accessibility, localization, and compression rates.» Перевод наш: такой подход плох для доступности, локализации и степени сжатия.

Затем страница добавляет: «the same image and text formatting is rarely equally readable across desktop and mobile formats». Перевод наш: одно и то же оформление изображения и текста редко одинаково читается на компьютере и на телефоне.

Соседний раздел о тексте в картинке есть и в статье Формат изображений для сайта: какой выбрать и что передать подрядчику, в разделе «Почему текст не помещают в картинку?». Краткость web.dev советует и для самого слайда: «You only have a fraction of a second to catch a user's attention.» Перевод наш: у вас есть лишь доля секунды, чтобы привлечь внимание пользователя.

Как слайдер связан со скоростью загрузки?

Коротко: web.dev пишет, что правильно сделанная карусель сама должна влиять на производительность очень слабо или не влиять совсем; при этом, по словам страницы, в каруселях нередко лежат большие медиафайлы. Страница советует загружать содержимое каруселей через HTML-разметку и называет показатели LCP и CLS. Пороги даны на отдельных страницах web.dev: хорошее значение LCP - 2,5 секунды или меньше (страница о LCP, обновлена 2025-09-04), CLS - 0,1 или меньше (страница о CLS, обновлена 2023-04-12).

Страница web.dev о каруселях начинает раздел «Performance» (перевод наш: Производительность) с оценки.

«A well-implemented carousel, in and of itself, should have very minimal or no impact on performance. However, carousels often contain large media assets.» Перевод наш: хорошо сделанная карусель сама по себе должна влиять на производительность очень слабо или не влиять совсем. При этом в каруселях нередко лежат большие медиафайлы.

Для слайдера на первом экране страница связывает размер с метрикой LCP. Она пишет: «Large, above-the-fold carousels often contain the page's LCP element, and therefore can have a significant impact on LCP.» Перевод наш: большие карусели на первом экране нередко содержат элемент страницы, по которому считается LCP, поэтому могут сильно на него влиять. Что такое LCP, объясняет отдельная страница web.dev, обновлённая 2025-09-04.

«LCP reports the render time of the largest image, text block, or video visible in the viewport, relative to when the user first navigated to the page.» Перевод наш: LCP показывает время отрисовки самого большого изображения, блока текста или видео в видимой области экрана, считая от момента, когда пользователь впервые перешёл на страницу.

Порог на этой странице назван так: «A good LCP value is 2.5 seconds or less.» Перевод наш: хорошее значение LCP - 2,5 секунды или меньше. Как измерять значение, в статье не разбирается. Второй показатель - CLS, определение и порог на странице web.dev, обновлённой 2023-04-12.

«A layout shift occurs any time a visible element changes its position from one rendered frame to the next.» Перевод наш: сдвиг макета происходит каждый раз, когда видимый элемент меняет положение между двумя отрисованными кадрами.

CLS (Cumulative Layout Shift, перевод наш: совокупный сдвиг макета) страница определяет как меру самой большой серии неожиданных сдвигов макета за всё время жизни страницы. Порог страница называет так: «Good CLS values are 0.1 or less. Poor values are greater than 0.25.» Перевод наш: хорошие значения CLS - 0,1 или меньше, плохие - больше 0,25. Для слайдера с автосменой страница о каруселях предупреждает отдельно и называет повторяющиеся сдвиги.

«for autoplay carousels, not only can these layout shifts potentially count towards CLS - but they can also repeat indefinitely.» Перевод наш: у каруселей с автосменой такие сдвиги не только могут учитываться в CLS, но и могут повторяться бесконечно.

Для разговора с подрядчиком полезен пункт про разметку. Отдельный пункт web.dev называется «Load carousel content using HTML» (перевод наш: Загружайте содержимое каруселей через HTML), и там же объяснено, почему.

«Using JavaScript to initiate the loading of carousel content is probably the single biggest performance mistake to avoid when using carousels. This delays image loading and can negatively impact LCP.» Перевод наш: запуск загрузки содержимого карусели через JavaScript - вероятно, самая большая ошибка производительности, которой стоит избегать при работе с каруселями. Это откладывает загрузку изображений и может ухудшить LCP.

Вес файлов страница тоже называет: «Carousels often contain some of a site's largest images, so it can be worth your time to make sure that these images are fully optimized.» Перевод наш: в каруселях нередко лежат одни из самых больших изображений сайта, поэтому стоит потратить время и убедиться, что эти изображения полностью оптимизированы. О формате, сжатии и размерах изображений написано в разделе «Какой размер изображения для сайта оптимален?» статьи Формат изображений для сайта: какой выбрать и что передать подрядчику.

Что решить до дизайна и что спросить у подрядчика?

Коротко: шесть вопросов, каждый опирается на разделы выше: есть ли место без слайдера, какие слайды нужны и в каком порядке, нужна ли автосмена, где лежит текст слайдов, какими путями дойти до их страниц и как оценят результат. Это перечень для разговора с подрядчиком, вывод автора.

Пример для example.ru, мебельной мастерской с главной страницей из пяти слайдов.

  1. Есть ли на странице место по вертикали, чтобы показать содержимое слайдов без слайдера? web.dev называет карусель уместной там, где такого места нет (раздел об уместности).
  2. Какие слайды нужны и в каком порядке по важности? Если карусель нужна, страница советует: «prioritize content» (расставьте приоритеты содержимого, перевод наш). Для example.ru это значит решить, что первым увидит посетитель: столы, комоды или акцию.
  3. Нужна ли автосмена? Если нет, вопрос закрыт. Если да, спросить, как её остановить и как она учитывает объём текста (разделы об автосмене и о WCAG 2.2.2).
  4. Где лежит текст слайдов: в разметке страницы или внутри изображения? Страница web.dev называет второй вариант плохим для доступности, локализации и сжатия.
  5. На какие страницы ведут слайды и каким ещё путём до них можно дойти (раздел о переключении).
  6. Как проверят, работает ли слайдер? web.dev советует оценивать и тестировать карусель на главной и называет показатель кликов. Какой показатель выбрать и где его смотреть, источник не говорит.

Для проверки содержимого слайдов страница предлагает тест на уместность: заинтересовало бы это содержимое посетителя вне карусели.

«If content wouldn't engage a user outside of a carousel - placing it in a carousel won't make it perform any better.» Перевод наш: если содержимое не заинтересовало бы пользователя вне карусели - помещение его в карусель не улучшит результат.

Соседний элемент страницы - всплывающее окно. Как называются такие окна и что про них написано у MDN, Google и Яндекса, собрано в статье Всплывающее окно на сайте: как называется и что проверить.

Что проверить при приёмке на телефоне и на компьютере?

Коротко: девять проверок. Восемь проходит сам заказчик на телефоне и на компьютере: автосмену и способ её остановить, кнопки, индикатор, жесты, другие пути к страницам слайдов, текст слайда и браузеры. Девятая - вопрос подрядчику о разметке и значениях LCP и CLS. Каждая опирается на раздел выше, а сам перечень - вывод автора.

На главной странице BITSPARK шаг «Запуск» описан так: «Проверяем desktop и mobile, скорость, формы и ключевые сценарии - затем запускаем.» Услуги студии, цены и шаги работы от задачи до запуска описаны там же: bitspark.ru. Приёмку слайдера на телефоне и на компьютере можно пройти по списку, в котором каждый пункт ссылается на раздел статьи.

  1. Откройте страницу со слайдером и подождите. Листается ли он сам? Если да, найдите способ приостановить, остановить или скрыть его (критерий WCAG 2.2.2, раздел выше).
  2. На компьютере наведите курсор на слайдер. Автосмена должна остановиться, если она есть (совет web.dev).
  3. Посмотрите на кнопки на светлых и на тёмных слайдах. Они заметны на каждом (раздел о переключении).
  4. Найдите индикатор: понятно ли, сколько слайдов и на каком вы находитесь.
  5. На телефоне листайте слайдер пальцем и кнопками. Как проверять страницы на экране телефона, описано в статье Адаптивный сайт: что это и как проверить адаптив до приёмки.
  6. Нажмите на каждый слайд и найдите то же содержимое через меню или другую ссылку.
  7. Попробуйте выделить мышью текст слайда. Если не получается, возможно, текст лежит внутри изображения: это вопрос подрядчику.
  8. Откройте страницу в браузерах из вашего списка приёмки. Как выбрать браузеры, описано в статье Кроссбраузерность сайта: что это и как проверить до приёмки.
  9. Спросите подрядчика, лежат ли изображения слайдов в HTML-разметке страницы или добавляются скриптом, и какие значения LCP и CLS получены для первого экрана. Пороги web.dev: 2,5 секунды или меньше для LCP (страница 2025-09-04) и 0,1 или меньше для CLS (страница 2023-04-12).

Источники

Страницы открыты 06.10.2026.

Обсудить проект в Telegram: t.me/billioniks

Читайте по теме

Все статьи раздела «Дизайн и элементы сайта» →