TGViewer
<divelopers> <divelopers> @alexnozer_dev · 1.18K subscribers
Post #148 1.43K
Нужно ли использовать карусели?

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

Есть один интересный сайт, который взывает к вопросу: Should I Use A Carousel (нужно ли мне использовать карусель). На этом сайте собраны UX-исследования о каруселях. Забавно, что сам сайт выполнен в виде карусели и лично я не успеваю прочитать весь текст некоторых слайдов до того, как они переключаются. Меня это дико бесит, интересно, это такая задумка?

Согласно исследованиям, карусели использовать не стоит. По ним кликает очень мало пользователей, автопрокрутка раздражает и мешает, много проблем с доступностью. При этом создание хорошей карусели — достаточно затратная и сложная задача. Не так давно я делился записью доклада Ильи Бирмана, в котором он тоже говорил о листаемых галереях:

Листаемые галереи отстой. Хорошо их не сделать, можно сделать не так плохо.


Если всё-таки дизайнер карусель нарисовал и требует реализовать, то стоит придерживаться хороших практик. WAI даёт пошаговый туториал по созданию доступной карусели. Можно использовать популярный Swiper вместе с a11y-модулем. Однако мне не очень нравится Swiper по ряду причин. Для простых случаев можно взять Shoelace Carousel или Splide. Также рекомендую посмотреть отрывок из доклада Ильи и прочитать его статью.

А лучше убедите дизайнера отказаться от каруселей и сделать простой список. Это сильно проще, дешевле, быстрее и доступнее. Страницы в Интернете — не лист бумаги, они не ограничены по высоте и будут прокручиваться вниз столько, сколько контента есть на странице.
  • 👍 18
  • 😱 3
  • 💯 2
  • ❤ 1
  • 🤡 1
More from @alexnozer_dev
  1. Sep 21, 2026Реализация пользовательских атрибутов Под конец прошлого года я рассказывал об API пользов…
  2. Sep 14, 2026Подклассы Event вместо CustomEvent Многие библиотеки предоставляют систему событий в качес…
  3. Sep 11, 2026Эволюция стилей в темах Shopify Адам Ватан на днях поделился новостью, что Shopify выкупил…
  4. Sep 9, 2026Persistent Widgets Многие сайты не должны быть SPA. Но иногда эта архитектура продиктована…
  5. Sep 7, 2026Processing Instructions и маркеры В DOM всё представлено в виде узлов (Node) разных типов.…
  6. Sep 1, 2026@scope и потоковая передача HTML Ноам Розенталь поделился интересной техникой, в которой с…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →