Как сделать карусель на сайт
Я собрал 10 лучших сниппетов с открытым исходным кодом, слайдер на CSS можно использовать в качестве шаблонов для создания собственных каруселей. Все они работают на чистом CSS.
Netflix Show Carousel
Эта карусель отличается уникальными эффектами анимации наведения и увеличения. Ее легко адаптировать для работы с видео.
Карусель построена только на CSS, поэтому добавить в нее динамические эффекты, такие как модальные окна для видео, немного сложнее. Но ее можно использовать ее для создания слайдера с анимацией наведения в стиле Netflix.
Annotated Linear Carousel
Некоторые карусели используют аннотации для добавления подзаголовков и дополнительного контекста для каждого слайда. Можно повторить данный эффект, применив эту демо-версию на чистом HTML / CSS.
В ней нет стрелок и точек навигации. Просто кликните по правой или левой стороне карусели, и вы сразу перейдете к следующему слайду.
Каждый переход сопровождается небольшим эффектом замирания, который также контролируется с помощью CSS.
Fading Carousel
Аккуратная карусель с эффектом затухания и небольшими элементами навигации: точки и стрелки с обеих сторон. Карусель контролируется с помощью CSS, стрелки работают как переключатели.
Каждая HTML-кнопка подключена к отдельному изображению, поэтому вы сможете легко просматривать их. Эффекты затухания задаются через CSS с помощью миксинов из этой библиотеки Sass для каруселей.
Responsive Slideshow
Слайдер с добавлением подписей, управляемый с помощью CSS. Он полностью адаптивен и работает в любом современном браузере.
Все стили CSS написаны на Sass. Слайдер использует библиотеку миксинов Bourbon для реализации дополнительного функционала. Анимация скольжения движется влево или вправо в зависимости от направления перемещения.
CSS3 Testimonials Slider
Этот слайдер отзывов легко реализовать.Он компактный и использует для анимации чистый CSS.
Слайдер реализует современный минималистичный подход в дизайне. В нем нет множества цветов, текстур и дополнительных элементов.
Picture Frame
С помощью переходов CSS и анимации ключевых кадров можно сделать очень многое. И эта анимация фоторамки показывает, насколько интересным может быть простой слайдер.
Каждая фотография перемещается в обе стороны с помощью простого эффекта скольжения. Вы можете добавлять фотографии любого размера, потому что рамка создана на чистом CSS.
Dark UI
Для привлечения внимания слайдер использует ярко-зеленые блики и красивые анимированные подписи.
Простой слайдер на CSS прост в использовании. А тот факт, что он работает на чистом CSS3, впечатляет.
CSS Image Carousel
Эту карусель изображений можно настроить, изменив всего несколько строк кода. Она использует CSS для создания небольшой рамки вокруг фотографий.
Все это работает на коде, состоящем из 100 строк CSS, и без Sass. Поэтому код легко скопировать и вставить в любой макет.
Pure CSS3 Carousel
Шаблон для создания слайдера фиксированными размерами от Элио Маркондеса. В нем с помощью очень простой анимации можно перелистывать каждый фон вместе с текстом.
Слайдер на чистом CSS, это один из самых простых шаблонов.
Text Carousel
Карусели идеально подходят для размещения отзывов или цитат на главной странице сайта. Если хотите обойтись без JavaScript, то можете использовать эту карусель, созданную с помощью чистого CSS.
Каждый блок текста имеет свой цикл анимации. Вы можете увеличить или уменьшить количество слайдов, добавив / удалив классы CSS.
Ant-карусель на CSS и Javascript
С появлением CSS3 появилась возможность совершать анимацию без использования JS-библиотек, таких, например, как jQuery. CSS3 свойство transition позволяет плавно изменять другие свойства элемента (width, height, margin, opacity и пр.), задав в качестве параметров время и закон трансформации. Предлагаю небольшую по размерам, но достаточно функциональную карусель на чистом Javascript. Небольшую, как муравей, что гораздо меньше чем сова. Но почти с такими же возможностями.
, если вам это удобнее. Стрелки и индикаторные точки располагаются абсолютным позиционированием в соответствующих контейнерах. Для стрелок используются рисунки в виде треугольных скобок, которые, при желании, вы можете заменить своими рисунками или генерацией изображения псевдо-элементами :before и :after.
Создаём карусель с тремя видимыми элементами и шириной элемента 270 пикселей. Тогда максимальная ширина карусели 810 пикселей. Подключаем CSS-файл:
Располагаем элементы в контейнере ant-carousel-list, устанавливаем для него свойство display: flex и прижимаем все элементы к левому краю justify-content: flex-start. Свойство flex: 0 0 auto устанавливает flex-shrink в 0 (по умолчанию 1). Прокрутка элементов карусели осуществляется при помощи свойства transiton плавным изменением отступа margin-left от нуля до ширины элемента (в одну сторону) или от ширины элемента до нуля (в другую сторону). Для функции трансформации (прокрутки) используется значение ease.
Переходим к программе. В опциях программы можно настраивать:
Алгоритм прокрутки элементов отличается в зависимости от того, включена опция цикла или нет. Если включена, при прокрутке вправо (функция elemPrev) свойство margin-left всей линейки элементов this.crslList уменьшается от нуля до отрицательного значения, равного ширине элемента elemWidth. Одновременно последний элемент справа клонируется и вставляется перед первым элементом, после чего последний элемент удаляется. Линейке присваивается свойство ‘transition: margin ‘+ options.speed+’ms ease’, где options.speed – скорость анимации, ease – функция анимации. Теперь можно осуществлять прокрутку. Свойство margin-left плавно меняется от отрицательного значения до нуля, вся линейка плавно смещается вправо и элемент, который был последним, оказывается на первом месте. Спустя options.speed микросекунд линейке присваивается прежнее значение ’transition: none’.
Если нужно прокрутить n элементов одновременно, перестановка элементов осуществляется в цикле n раз, а расстояние margin-left увеличивается в n раз.
Прокрутка влево (функция elemNext) происходит в обратном порядке. Сначала линейке this.crslList присваивается свойство ‘transition: margin ‘+ options.speed+’ms ease’ и линейка плавно прокручивается влево (crslList.style.marginLeft = ‘-‘ + elemWidth + ‘px’). Далее спустя options.speed микросекунд первый элемент клонируется и вставляется в конец линейки, после чего первый элемент удаляется. Линейке возвращается значение ‘transition: none’. Если нужно прокрутить n элементов одновременно, перестановка элементов так же, как и в предыдущем случае, осуществляется в цикле n раз и расстояние margin-left увеличивается в n раз.
Если опция цикла выключена, то в этом случае перестановок элементов нет, а вся линейка элементов смещается как единое целое влево или вправо до своих крайних точек. Линейке элементов this.crslList свойство ‘transition: margin ‘+ options.speed+’ms ease’ присваивается ещё при инициализации карусели и больше не удаляется.
Вызов карусели производится по имени класса ant-carousel или по идентификатору. Во втором случае можно разместить несколько каруселей на одной странице. Файл index.html с каруселью может выглядеть так:
Чтобы разместить нескольких каруселей на одной странице нужно вызывать их по идентификатору. Разные карусели могут иметь разное количество элементов.
Как сделать плагин карусель на сайте
Пост я этот решила написать потому, что очень многие посетители задают мне один и тот же вопрос – Как можно сделать слайдер внутри статьи, и какими ресурсами я для этого пользуюсь.
Поэтому я сегодня очень подробно расскажу о некоторых тонкостях установки слайдера – карусели.
И действительно! Очень удобно, практически для сайта любой направленности. Например, Вы решили показать фотографии своего воскресного отдыха. Не надо делать страницу длинной. Загрузить в одну карусель можно до 100 фотографий.
Или например, как на моем сайте, надо показывать множество скриншотов. А если у Вас сайт, предлагающий какие-либо продукты. Проще – продающий. Тоже очень удобно и наглядно.
Итак, первое что надо сделать – это установить на своем блоге плагин Shortcodes Ultimate. В редакторе статьи появится кнопка – Вставить шорткод.
Проходим по ней и находим ссылку – Карусель.
Откроется лента настроек. Но прежде чем мы посмотрим как будем устанавливать слайдер – поговорим о некоторой подготовке. Слайде будет выглядеть качественно только тогда, когда все изображения в нем будут четкими и не деформированными. Для этого надо подготовить их одинакового размера.
Если это фотографии сделанные в одном формате, то проблем нет. Просто будем их загружать. Но, например, в моем случае, когда я загружаю скриншоты с мелким текстом, то передо мной возникает задача сделать их читаемыми и без потери данных. Так как опытным путем я определила. что даже немного отличающиеся размером скрины, устанавливаются не корректно. Поэтому, при их создании я стараюсь сохранить одинаковым, хотя бы ширину.
Делаю скрины FastStone Capture. Там есть возможность устанавливать определенный размер. Чем я с успехом и пользуюсь. При сохранении изображения обязательно давайте ему адекватное название. Так как если Вы хотите показать описание слайда, то именно название будет отображаться.
И еще один очень важный момент, который особенно касается продающих сайтов. Вы загружаете, например, какие-либо товары. И хотели бы, что бы посетитель кликнув на изображение мог перейти на другой ресурс – подготовьте ссылку на этот ресурс. И при загрузке изображения в библиотеку, при его оптимизации мы установим ее в поле – Ссылка слайда.
Итак, изображения готовы. Теперь можно их загрузить в библиотеку медиафайлов, не привязывая к определенной статье.
Вот теперь все готово.
Начинаем работать с Каруселью.
Остальные настройки очень просты, настраиваются интуитивно. Я только покажу как выглядит – Предпросмотр.
Как только убедитесь, что все хорошо – кликаем на кнопу – Вставить шорткод. Я так и сделаю сейчас. Все картинки снабжены ссылками. Так что можете посмотреть работу карусели в действии.
Создаем эффективные стили для каруселей
Эта статья не о дизайне эффективных каруселей, а об эффективном создании стиля. Другими словами, речь пойдет не о UI-дизайне, а о конструкциях CSS – смене элементов карусели, их позиционировании и размерах.
Зависимость от JavaScript с точки зрения взаимодействия, а не стиля
«Эффективная карусель» — это карусель, которая не зависит от JavaScript с точки зрения:
• отзывчивости
• содержания любого количества элементов
• отображения любого количества элементов
Вызов
Существует множество способов отображения элементов в карусели типа «side-by-side» (в ряд), однако некоторые из этих способов лучше других.
Карусель на сайте disneystore.com демонстрирует два основных ограничения такого стиля:
• контейнер должен иметь ширину большую или равную сумме ширины дочерних элементов (их наружной рамки), чтобы отображать все элементы в ряд (чтобы избежать их сползания).
• ширину элементов невозможно указать в процентном соотношении, так как размер блока (рамки, которая используется в качестве основы для расчета этой ширины) привязан к количеству его дочерних элементов, а не к видимой области карусели.
Чтобы лучше понять проблему, посмотрите на следующий пример:
Вышеуказанный список включает пять элементов – все оформленные с помощью элемента float. Сам по себе список создан с помощью overflow:hidden (чтобы создать контекст форматирования блока), поэтому список выравнивает поплавки вместо того, чтобы схлопнуться.
Здесь проблема заключается в том, что элементы сползают, если их контейнер имеет недостаточную ширину, чтобы вмещать все эти элементы в ряд, как показано ниже:
Поэтому это решение требует установки точной ширины контейнера, которая не даст этому контейнеру быть отзывчивым (без необходимости JavaScript).
В каруселях как на сайте on.aol.com все элементы удалены с потока, поэтому каждый из них зависит от отдельного значения смещения, отображаясь сразу после предыдущего своего собрата.
Посмотрите на еще один пример:
Так как все рамки имеют абсолютное позиционирование, они удаляются с потока и размещаются на одних и тех же координатах x/y; последняя рамка показывает верх стопки.
В результате, авторам нужно сделать 3 вещи:
• оформить контейнер с помощью элемента height, чтобы предотвратить смещение вверх последующих элементов (за рамки).
• оформить каждую рамку со смещением влево (left ), чтобы отобразить элементы в ряд.
• оформить контейнер с помощью элемента position:relative, чтобы превратить его в блок, содержащий дочерние элементы.
Одинаковые рамки создаются следующим образом:
Именно так выполнена карусель на сайте aol.com, и все смещения там указаны в пикселях. Но интересно то, что ширина (width) контейнера задана таким же образом, как и в нашем примере с float. Контейнер оформлен таким образом, чтобы иметь ту же ширину, что и суммарная ширина всех его дочерних элементов – даже несмотря на использование position:absolute он позволяет авторам использовать более простой подход, который улучшает характеристики блоков контейнера.
В отличие от конструкций float, ширина (width) контейнера не играет роли в позиционировании вложенных рамок. Это означает, что можно использовать процентное соотношение для отображения элементов в полную ширину (100%) или в качестве части их контейнера (блока, в котором они содержатся); например, оформление каждой рамки с соотношением 50% покажет 2 элемента в ряд, как показано ниже:
Ширина (width) вышеуказанного контейнера установлена на значении 30%, все остальные значения (смещения влево (left) и ширина (width) рамок) также указаны в виде процентных соотношений.
В данном случае ширина контейнера составляет 50%, а ширина каждой рамки — 25%, что позволяет отображать четыре рамки в ряд внутри контейнера.
Это решение определенно лучше, чем использование float, но недостатком тут является то, что удаление все элементов с потока требует оформления контейнера с указанием высоты (height), чтобы предотвратить отображение последующих исходных элементов за всеми рамками.
Решение
Грубо говоря, это решение требует убедиться, что блок, содержащий элементы, соответствует видимой области карусели, и что ничего не выпадает из потока – тут высоту карусели задает контент.
С таким простым оформлением и макетом, как и в конструкции с float, вложенные рамки сползают, если им недостаточно места:
Мы можем избежать сползания рамок с помощью white-space:nowrap:
Теперь у нас есть решение, которое не требует установки точного значения высоты (height) контейнера и оформления вложенных рамок со смещением или настройки их ширины (width) с точными значениями. И в качестве бонуса – это решение подходит для RTL:
Реализация карусели
Смещение за счет margin
Использования левого поля на первом элементе достаточно, чтобы сдвинуть все поля за раз (влево или вправо):
Оформление контейнера с overflow:hidden скроет элементы, которые находятся за пределами контейнера:
Единственно, что стоит не забывать – это сбрасывать описание nowrap, если этот стиль унаследован.
Смещение за счет translate, position, и пр.
Перемещение контейнера, а не его первого дочернего элемента, требует использования дополнительной обертки (обратите внимание, что все стили переносятся со списка на эту надстройку):
Карусель с выглядывающим элементом
Это решение мы можем легко выполнить следующим образом:
Обратите внимание, что именно изображения задают высоту карусели, и что все поля отзывчивы и правильно позиционированы – без использования JavaScript.
Чистая CSS-карусель с эффектом плавного появления
Логика, в которой не требуются знания математики!
Вы можете отредактировать значение width ниже, чтобы проверить «отзывчивость» этого решения.
Более сложная карусель
Как отобразить два элемента, разделенных разрывом, передвигая один элемент карусели за раз.
8 правил дизайна «карусели» для главной страницы сайта — исследование Baymard Institute Статьи редакции
Специалисты Baymard Institute опубликовали исследование дизайна каруселей на главных страницах сайтов и сформировали рекомендации по их проектированию.
Сооснователь «Проектората» Антон Григорьев перевёл для vc.ru заметку, опубликованную в блоге института.
Карусели часто встречаются в интернет-магазинах. Особенно на главных страницах. Мы обнаружили их на главных страницах десктопных версий 52% топовых американских интернет-магазинов. Мы ещё не закончили соответствующее исследование, но предварительные данные показывают, что на мобильных версиях карусели тоже популярны.
Полезны ли карусели пользователям? Или единственная их цель — примирить отделы интернет-магазина, дерущиеся за баннерное место на самом видном месте? Ответ прост: карусели на главных страницах могут быть полезны, но часто на практике работают они очень плохо. Исследование выявило 8 проблем в реализации каруселей. Проблемы и решения отличаются для мобильных и десктопных версий сайтов.
«Ого, какая агрессивная здесь реклама», — пожаловался посетитель страницы drugstore.com. — «Она сбивает меня с толку». Карусель с плохим содержанием не может быть хорошей.
Обратите внимание, мы пишем о дизайне каруселей и взаимодействии с ними, а не о контенте. В рамках статьи мы допускаем, что к содержанию каруселей претензий нет, и сосредотачиваемся на том, чтобы сделать её удобнее для пользователей.
Во время тестов мы часто наблюдали, как внимание респондентов привлекали большие авторские изображения, которые часто встречаются в каруселях на главных страницах. И как незначительные на первый взгляд недоработки раздражали, вводили людей в заблуждение и превращали их интерес в неудачный и даже вредный пользовательский опыт.
Рассмотрим три главных элемента: последовательность слайдов, их автоматическая смена, контекст устройства (отличие мобильных, планшетов и десктопов).
Последовательность слайдов
Большинство пользователей не увидит всех слайдов, даже если они сменяются автоматически. Они просто не проведут столько времени на главной странице и особенно в её верхней части.
В ходе тестирования респонденты уходили с главной или прокручивали её так, что карусель скрывалась из виду, задолго до того как появлялся последний слайд. В случае с «полностью ручной» сменой первые слайды отображаются до тех пор, пока пользователи не начинают переключать их самостоятельно.
Это показывает, что последовательность слайдов чрезвычайна важна. Первые получают намного больше внимания, чем следующие за ними. При этом нельзя быть уверенным, что пользователи увидят какой-то конкретный слайд. Разве что первый слайд в карусели, находящейся на первом экране десктопного сайта.
На мобильных карусель часто смещается с первого экрана. А ещё пользователь может не дождаться загрузки большого изображения и пойти дальше, потому что кроме этого изображения отвлечься ему не на что. В десктопных версиях пользователи обычно 1–2 секунды изучают навигационное меню, чего достаточно для загрузки первого слайда.
Единственный путь к визарду выбора подарка на Toys’R’Us — через слайд в карусели. Вероятность, что пользователи его обнаружат, крайне низка. Особенно, если это не первый слайд.
Это не проблема, если кроме карусели есть альтернативный путь к возможностям и содержимому сайта. Однако, многие сайты из наших исследований продвигали определённые предложения и возможности (продуктовые визарды, поиск подарков и так далее) только с помощью карусели. А вот это уже проблема. Многие респонденты уходили с главной страницы, так и не узнав об этих инструментах.
Кратко: осторожно выбирайте последовательность слайдов, используйте карусель только для дополнительного продвижения, то есть слайды не должны быть единственным путём к возможностям и содержимому сайта.
Автоматическая смена слайдов
Автосмена распределяет внимание пользователя между слайдами и намекает, что перед ним карусель, а не простой баннер. Но анимация привлекает к себе повышенное внимание, соответственно, повышаются требования и к содержимому карусели.
Если вы всё это понимаете и оставляете автосмену слайдов, учтите следующие нюансы её работы.
Состояние при наведении курсора
Включайте автосмену только если устройство пользователя распознаёт состояние при наведении курсора. Это критически важно для распознавания интереса пользователя.
Если пользователь навёл курсор на слайд, это признак того, что содержимое его заинтересовало и он, возможно, захочет нажать на него после прочтения текста. Поэтому приостанавливайте автосмену, чтобы пользователь дочитал текст и не нажал по ошибке на следующий внезапно открывшийся слайд.
Респондент заинтересовался Spring Into Summer Mega Sale и нажал на него. К сожалению, мгновением ранее слайд сменился на Bike Blast, и пользователь попал не туда, куда хотел.
На практике это значит, что автосмена не годится для мобильных сайтов. В мобильных устройствах нет курсоров и состояния при наведении курсора, люди взаимодействуют с ними при помощи касаний. Если нет способа понять, куда смотрит пользователь, сайт не узнает, собирается он нажать на текущий слайд или нет. Слайд может смениться за мгновение до нажатия на карусель, и это приведёт к открытию ненужной страницы. В ходе исследования мы наблюдали такой сценарий множество раз.
Большинство посетителей мобильных сайтов используют устройства без состояний при наведении курсора. На них автосмену лучше не использовать, так как сейчас неизвестно, как избежать несвоевременной смены слайдов. Минусы от открытия ненужных страниц частью пользователей перевешивают плюсы от распределения внимания между слайдами.
Нюансы автосмены на десктопных сайтах
Для правильной автосмены на десктопных сайтах обратите внимание на три момента:
Слайды не сменяются слишком быстро
В этом случае пользователи не успеют рассмотреть интересный слайд. Им будет неприятно в спешке читать текст, ожидая смены слайда. Слишком медленная автосмена вызовет обратный эффект, пользователи заскучают со слайдами, которые им не очень интересны.
Респондентам понравились большие красивые изображения на главной странице Pottery Barn. Многие из них посчитали, что слайды сменяются слишком быстро, и у них остаётся слишком мало времени на изучение содержимого.
Длительность должна зависеть от количества текста на слайде. Для одного короткого заголовка хватит 5–7 секунд, для многословного текстового содержания нужно больше времени, прежде чем автосмена переключит карусель на следующий слайд. Как следствие, каждому слайду можно установить уникальную длительность.
Автосмена приостанавливается при наведении курсора
Между положением курсора на странице и вниманием пользователя есть взаимосвязь (Родден К. и другие, Google 2008, страница 29). Таким образом, наведение курсора на карусель можно считать показателем того, что пользователь заинтересовался слайдом, и лучше их автосмену приостановить.
Но важнее сделать это для того, чтобы избежать ситуации, когда пользователь хочет нажать на интересный ему слайд, а нажимает на новый, только что отобразившийся в карусели. Мы часто наблюдали это в своих тестах.
«Если я навёл курсор, оно должно остановиться», — объяснил посетитель Blue Nile. — «Иначе я рискую нажать на неправильный слайд, потому что они меняются, и попасть на неправильную страницу».
Если пользователь понял, что попал не туда, это лишь слегка его расстроит, так как придётся вернуться, найти в карусели нужный слайд и нажать на него снова. Но мы наблюдали много ситуаций, когда респонденты не понимали, что произошло, продолжали изучать неправильную страницу и быстро находили её совершенно бесполезной.
Важно приостанавливать автосмену слайдов при наведении курсора, чтобы не расстраивать пользователей и не отправлять на бесполезные страницы. К сожалению, 22% топовых интернет-магазинов этого не делают.
Примечание: если пользователь убрал курсор с карусели и никак с ней не взаимодействовал, возобновляйте автосмену. Наведение курсора нельзя интерпретировать как взаимодействие, так как пользователь может случайно провести курсором над каруселью. Наведение курсора — хороший способ понять, на что пользователь обратил внимание, но это не активное пользовательское взаимодействие.
Автосмена прекращается после любого активного пользовательского действия
Если пользователь активно взаимодействует с каруселью, например, переключает слайды, останавливайте автосмену. Даже если пользователь увёл курсор.
Если он открыл конкретный слайд с помощью кнопок «Следующий», «Предыдущий» или индикаторов, скорее всего, он сделал это намеренно. Не стоит обесценивать сделанный пользователем выбор только потому, что он, возможно, решил изучить остальное содержимое главной страницы, прежде чем нажимать на выбранный слайд.
Нажатие в корне отличается от наведения курсора, которое в лучшем случае сообщит об интересе пользователя. Нажатие — это конкретный пользовательский запрос и надёжный показатель его интереса и намерений. Поэтому останавливайте автосмену после активных действий пользователя, так как он мог открыть определённый слайд намеренно.
Мобильные сайты
Как мы уже писали, не стоит автоматически переключать слайды на мобильных сайтах, так как мы взаимодействуем с ними касаниями, а не двигая курсор по экрану. Но обратите внимание на ещё три момента.
Во-первых, поддерживайте основные механики работы с мобильными устройствами. В частности, жесты смахивания, которыми пользователи привыкли пролистывать галереи. Это не значит, что нужно отказаться от традиционных карусельных кнопок (следующая, предыдущая и индикаторы). В исследовании мобильной коммерции мы убедились, что их можно добавить к уже работающим жестам.
Neiman Marcus использует одни и те же изображения для десктопной и мобильной версии сайта. На некоторых слайдах сложно разобрать текст.
Во-вторых, мы часто видели, что в каруселях на мобильных сайтах были те же изображения, что и на десктопных. Это не проблема, если они подобраны аккуратно и можно быть уверенным, что текст останется читаемым даже на маленьких экранах мобильных в портретном режиме. Кратко: будьте аккуратны, повторно используя изображения с текстом.
И в-третьих, пользователи мобильных менее терпимы к медленной загрузке слайдов. Скорее всего, потому что кроме карусели на экране ничего нет. На десктопных сайтах люди обычно просматривают навигационные меню и другое содержимое, пока загружаются слайды.
Контрольный список для внедрения карусели
Если содержание карусели плохого качества, нерелевантно и неаккуратно подобрано, её не спасёт удобное взаимодействие. Но если эти критерии учтены, карусель — отличный способ рассказать пользователям об интересных возможностях и содержимом сайта.
Если вы используете карусель, при её внедрении:
Да, часть пользователей проигнорирует карусель из-за баннерной слепоты. А кто-то просто их не любит. Но если вы прислушаетесь к этим рекомендациям, остальным будет удобно, слайды волшебным образом станут привлекательнее, а содержание полезнее. Если учесть эти 8 нюансов вы не можете, от использования карусели на главных страницах лучше отказаться вовсе.