Бесконечная прокрутка: Бесконечная прокрутка против разбивки на страницы / Хабр

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

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

Что это такое

Infinite scroll — механизм, который превращает контент в единый поток. По мере прокрутки страницы появляются новые блоки. Приём активно используют социальные сети и онлайн-медиа, главная задача которых заключается в вовлечении посетителей. Бесконечный скролл даёт обманчивое впечатление, что у данных нет границ. Они есть, просто в некоторых случаях листать придётся очень долго.

Способ подгрузки данных не является универсальным. Его нельзя просто добавить на сайт или в приложение, чтобы приобщиться к тренду. Надо тщательно проанализировать особенности проекта, посоветоваться со специалистами по юзабилити, поставить себя на место целевой аудитории и протестировать отображение на разных устройствах.

Бесконечный скроллинг — крутая альтернатива постраничной навигации. Пагинация представляет собой более простой и наглядный способ упорядочивания контента. Изначально подгружается несколько «плиток» с товарами или новостями. В конце размещается маленький блок с цифрами. Каждый кружочек или квадратик — ссылка на определённую страницу. По клику можно перейти на следующий уровень и посмотреть, что там спрятано.

Складывается впечатление, что стандартная пагинация даёт больше контроля и надо использовать только её. На самом деле, у двух решений есть преимущества и недостатки. Наша статья посвящена infinite scroll, но затронуть сильные и слабые стороны аналога определённо надо.

Плюсы постраничной навигации:

• пользователь контролирует процесс;
• наглядное отображение пройденного пути;
• интуитивно понятная структура.

Минусы:

• для перехода надо выполнять дополнительные шаги;
• снижение быстродействия.

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

У постраничной навигации есть существенные минусы, которые могут перекрыть плюсы. Если разработчик допустил грубые ошибки — это повлияет на юзабилити. Блоки с номерами страниц часто оформляют в виде небольших кружочков. Если программист сделает ссылкой не всю фигуру, а только определённую область, юзер может запутаться и закроет страницу.

Ещё одна распространённая проблема — снижение быстродействия. Когда страница подгружается за 1-2 секунды, подождать несложно. В некоторых случаях обновление контента затягивается на 10-15 секунд. Пользователь не будет ждать, пока контент прогрузится и уйдёт к конкурентам.

Проблемы, описанные выше, касаются и бесконечного скролла. Понятный механизм, высокое быстродействие и отсутствие раздражающих факторов обеспечат идеальный user experience и положительно повлияют на конверсии.

Преимущества и недостатки infinite scroll 

Дизайнер напрямую не влияет на организацию бесконечной прокрутки, но хороший специалист не бросает проект после разработки макета. Он следит за превращением структуры в рабочий веб-сайт или приложение, даёт рекомендации заказчику и сообщает о критических проблемах.

Давайте подробно остановимся на преимуществах и недостатках технологии, чтобы определить, в каких случаях её надо применять. Начнём с плюсов.

1. Улучшение поведенческих факторов

Ранее мы указывали, что бесконечная подгрузка информации стала популярной из-за повсеместного использования в социальных сетях. Человек быстро погружается в информационный поток и забывает о времени. Сайт словно «бросает» вызов и говорит: «Посмотри ещё, дальше много интересных постов». Именно поэтому у «Вконтакте» и других сервисов визит длится намного дольше, чем у стандартных информационных проектов.

2. Меньше действий

При использовании постраничной навигации надо постоянно кликать по блокам. Бесконечная прокрутка облегчает взаимодействие. Можно листать колёсиком мышки или через клавиатуру. Никакого длительного обновления страницы и других проблем. Этот плюс принесёт пользу, только если разработчик выполнил оптимизацию быстродействия. Иногда infinite scroll работает с рывками или хуже того — положение возвращается к исходному значению. В этом случае негатива со стороны посетителей не избежать.

3. Идеальное решение для смартфонов

На мобильных устройствах маленький экран и скролл давно стал привычным ритуалом. Популярность технологии обеспечивается и за счёт этого фактора. На десктопах прокручивать контент с помощью скроллбара удобно, но у пользователя нет ощущения контроля. Другое дело смартфон — проводишь по дисплею сверху вниз и наблюдаешь за магией.

Правильное использование длинной прокрутки — настоящее искусство. Даже опытные разработчики часто допускают ошибки и не учитывают важные нюансы. Рассмотрим минусы infinite scroll.

1. Ущерб для производительности

Парадоксально, но infinite scroll влияет на быстродействие и положительно, и отрицательно. Сначала пользователь видит ограниченное количество контента, то есть секция прогружается быстро. По мере прокрутки количество блоков увеличивается, растёт нагрузка и страница становится более «тяжелой». Если на компьютере или смартфоне открыто несколько вкладок, ресурсов системы может не хватить.

2. Потеря контроля

При использовании пагинации у пользователя есть полный контроль над ситуацией. Он переходит на страницу, анализирует контент и сам решает, куда пойти. При использовании бесконечного скролла вариант только один — прокручивать дальше, чтобы увидеть новые записи. Хорошо, если разработчик добавил кнопку для перехода к верхней части. Если нет, придётся задействовать мышку, чтобы вернуться в начало.

3. Поиск местоположения

Если infinite scroll установлен на коммерческом сайте, который продаёт товары, посетителю будет сложно ориентироваться. Если скроллбар скрыт, человек не поймёт, где именно он находится. Возникнет желание закрыть вкладку. Хорошо, если он заранее добавил продукты в корзину или виш-лист. В противном случае бизнес потеряет потенциального клиента.

4. Бесполезный scrollbar

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

5. Потеря футера

Больше всего ущёрба бесконечная прокрутка приносит, когда в нижней части страницы есть полезная информация. К примеру, в интернет-магазине для экономии пространства убрали контактные данные из хедера и разместили в футере. Юзер зашел в каталог, активировал фильтры и начал анализировать товары. Затем у него появилась необходимость уточнить комплектацию. На сайте нет онлайн-консультанта, а чтобы узнать телефон надо увидеть футер. В этом случае длинная прокрутка испортит впечатления и станет отталкивающим фактором.

Любые технологии и новые фишки нельзя использовать на реальных проектах только потому, что так делают конкуренты. Material design, flat и другие направления в дизайне дадут преимущества, только если они использованы с хирургической точностью и предварительным анализом потребностей целевой аудитории. Аналогичная ситуация и с бесконечной прокруткой. Если хотите, чтобы она была полезной, протестируйте разные сценарии работы, чтобы избавиться от негативных последствий.

Советы по использованию infinite scroll

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

Прочитайте 7 советов, которые помогут создать эффективный бесконечный скролл.

Мотивируйте пользователей

Прокрутка — стандартное действие, которое владельцы сенсорных устройств используют каждый день. Несмотря на это, важно показать, что на странице используется автоматическая подгрузка контента. Иначе люди могут увидеть только часть информации. Представьте, что потенциальный клиент нуждается в помощи ветеринара. Он заходит на сайт и видит только первую секцию с названием фирмы. Этих данных мало для принятия решения.

Юзеры используют прокрутку только если хотят увидеть дополнительный контент. Надо заинтересовать их с первых секунд и мотивировать на близкое знакомство. Используйте красочные картинки, анимацию, подсказки и другие интерактивные фишки.

Разработайте понятную структуру

Длинная прокрутка, как и другие приёмы вовлечения, должны интегрироваться в проект после создания идеального «скелета». Хорошее решение — использовать знакомую структуру, которая встречается на популярных сайтах. Когда пользователь попадает в место подгрузки нового контента, обычно появляется анимация с точками или прелоадер. Это сигнал того, что сейчас появится дополнительная информация.

Если юзер столкнется с «ложным дном», он не будет листать дальше. Надо размещать данные так, чтобы не создавать обманчивые впечатления. Аудитория должна понимать, что им нужно прокрутить ниже для отображения дополнительных блоков. Задачу решить легко — добавьте визуальную подсказку. Это может быть всплывающий тултип или более сложные варианты с анимацией. Если infinite scroll используется для сайтов с разметкой контента в виде «плиток», можно показать начало следующего набора до прокрутки. Или вставить стрелку, по клику на которую откроется новая секция. Обычно такой подход используется для сайтов с контентом в виде слайдера. Информация разбивается на несколько блоков, и они переключаются по скроллу мышкой.

Позаботьтесь о меню

На сенсорных устройствах полезная площадь гораздо меньше, чем на широкоформатных мониторах. Перед внедрением бесконечной прокрутки контента надо разработать «липкое» меню. При скролле вниз шапка должна закрепляться в верхней части страницы. Сделайте так, чтобы при длинной прокрутке навигация скрывалась и появлялась снова, когда пользователь листает вверх.

Обеспечьте максимальный комфорт

Для проектов с подгрузкой контента через infinite scroll часто возникает проблема с запоминанием местоположения. Например, пользователь долго листал ленту новостей и ему пришло оповещение о новой публикации. Он скроллит наверх, чтобы прочитать сообщение, и чтобы снова вернуться к чтению, надо пролистать огромное количество блоков.

Отличное решение проблемы придумала социальная сеть «Вконтакте». При просмотре обновлений в общей ленте пользователь может в один клик перейти в хедер и «прыгнуть» обратно. На скриншоте ниже наглядно продемонстрирован механизм работы.

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

Добавьте анимацию

Чтобы пользователь сконцентрировался на изучении контента и не отвлекался на другие задачи, надо использовать инструменты вовлечения. Добавьте красочную анимацию и нестандартные эффекты. Только не забывайте о быстродействии. Протестируйте работу на разных устройствах, включая смартфоны с мобильным интернетом. Если анимация повлияет на скорость загрузки и удобство, откажитесь от неё.

Длинная прокрутка отлично подходит для повествования и сторителлинга. Контент рассказывает увлекательную историю, каждый блок дополняет предыдущий. Можно задействовать эффект параллакса и удержать внимание человека с помощью медленного движения фона.

Сделайте наглядные индикаторы

При взаимодействии с контентом пользователю нужны визуальные сигналы, которые отображают состояние системы. При клике на слайдер должен появляться следующий элемент. При загрузке дополнительной секции новостей, надо показать короткую циклическую анимацию. Так юзеры поймут, что сейчас появятся блоки и надо подождать. Если обновлять содержимое без предварительного информирования, пострадает юзабилити.

Адаптируйте механизм под SEO

Органический трафик из поисковых систем не будет лишним в любой тематике. Особенно если это коммерция с высокой стоимостью клика в рекламных сетях. Подгрузка контента через бесконечный скролл может негативно повлиять на представление сайта в результатах поиска. Роботы Google видят только часть контента до первой прокрутки. Надо сделать так, чтобы информация на странице разбивалась через специальные ссылки и не допускать создание дублей. В консолях для веб-мастеров можно посмотреть, как выглядит исходный код проекта и оперативно внести правки.

3 альтернативы технологии

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

Загрузка по кнопке

Принцип работы простой — по умолчанию отображается несколько результатов и кнопка, которая запускает подгрузку дополнительного контента. Мало чем отличается от концепции бесконечной прокрутки, но у юзера появляется контроль над ситуацией. Он сам решает, что делать. Такое сочетание обеспечивает максимальный комфорт.

Вложенные категории

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

Слайд-шоу

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

Бесконечная прокрутка поможет вовлечь аудиторию в развлекательный контент и обеспечит удобную навигацию, если соблюдать правила из статьи.

Веб-студия IDBI поможет организовать эффективную навигацию по контенту ваших проектов. Мы знаем, когда использовать infinite scroll, а когда пагинацию. И можем объяснить свою позицию.

Бесконечная прокрутка для сайта WordPress

Привет, друзья! Вы хотите добавить бесконечную прокрутку на свой сайт или блог? Тогда читайте как это сделать. Бесконечная прокрутка WordPress позволяет автоматически загружать следующий набор записей, когда посетители приближаются к нижней части главной страницы или страницы записей. Так посетители могут прочитать больше записей без дополнительных усилий.

Бесконечная прокрутка постов WordPress устраняет необходимость разбивки на страницы в вашем блоге или на сайте электронной коммерции.

Бесконечная прокрутка (скроллинг) WordPress

Это метод веб-дизайна, который автоматически загружает содержимое следующей страницы сайта, когда пользователи достигают нижней части страницы при прокрутке. В итоге посетители видят больше контента, не нажимая на нумерацию страниц или кнопку «Загрузить еще». Это облегчает просмотр. Использует технологию AJAX.

Бесконечная прокрутка является практически обязательным элементом новостных интерфейсов. Когда пользователь не ищет что-то конкретное, ему нужно просмотреть множество тем, чтобы найти ту, которая понравится. Самые популярные сайты социальных сетей с бесконечной прокруткой это — Facebook, Instagram, Twitter, Pinterest и другие.

Функциональность бесконечной прокрутки может оказать положительное влияние на вовлеченность пользователей и поведенческие факторы. Но правда в том, что бесконечный скроллинг на сайте подходит не для всех. Есть плюсы и минусы бесконечной прокрутки.

Плюсы бесконечной прокрутки:

• Повышение вовлеченности пользователей — бесконечная прокрутка помогает удерживать людей на вашем сайте в течение более длительных периодов времени. Больше просмотров страниц;
• Упрощенное чтение. Благодаря бесконечной прокрутке, пользователям будет проще находить контент, о котором они не знали, что они есть на вашем сайте, поскольку они смогут быстро и легко загружать старый контент;
• Улучшенная навигация по сайту — бесконечная прокрутка делает просмотр вашего сайта простым — все, что вам нужно сделать, это прокрутить страницу вниз;
• Прокрутка хороша для мобильных устройств.

Минусы бесконечного скроллинга:

• Отсутствие раздела нижнего колонтитула.  При переходе к бесконечной прокрутке вы не можете добраться до футера. Естественно, ничего страшного тут нет, но надо принять это во внимание, если вы используете подвал вашего сайта для получения важной информации. Тем не менее, липкий футер/подвал решает эту проблему;
• Нет ощущения «завершения».  Пользователям на самом деле нравится чувство «завершения», когда они достигают конца страницы. Бесконечная прокрутка делает это ощущение невозможным.

Статистика показывает, что люди читают больше записей, когда бесконечная прокрутка внедрена на сайт. И поэтому, я надеюсь, что вам понравится данная функция!

Как добавить бесконечную прокрутку на сайт WordPress?

Если вы решили добавить бесконечную прокрутку в свой блог WordPress, то вы можете сделать это легко. Я покажу вам несколько плагинов, которые вы можете использовать на своём веб-ресурсе. Выбирайте тот, который лучше всего соответствует вашим потребностям. Реализовать бесконечный скроллинг на сайте WordPress можно с помощью бесплатных плагинов. Например:

1. WordPress Infinite Scroll – Ajax Load More;
2. Catch Infinite Scroll;
3. YITH Infinite Scrolling;
4. Infinite Scroll and Ajax Load More.

Для примера возьмём простой плагин бесконечной прокрутки для WordPress — Catch Infinite Scroll. 

Плагин Catch Infinite Scroll

Catch Infinite Scroll — это плагин WordPress, который позволяет добавить магию бесконечной прокрутки с помощью нескольких настроек на вашем сайте. Плагин поможет увеличить вовлеченность пользователей на вашем сайте ВордПресс. Вдохновением для создания Catch Infinite Scroll является бесконечный свиток модуля Jetpack.

Плагин будет загружать контент автоматически при прокрутке страницы или вы также можете добавить кнопку «Загрузить еще», чтобы загрузить больше контента.

Первым делом вы должны установить плагин Catch Infinite Scroll стандартным способом. То есть, из вашей админки:

После активации модуля, перейдите в одноимённый новый раздел Catch Infinite Scroll для того, чтобы настроить параметры плагина. Нам понадобится только вкладка Dashboard:

Чтобы включить бесконечную прокрутку на своем веб-сайте выберите в строке Load On (Trigger on) из выпадающего списка функцию Scroll. Функция Click это — загрузить еще при нажатие кнопки. Scroll — будет автоматически загружать посты при прокручивании страницы вниз:

Далее вы можете увидеть селектор навигации, следующий селектор, селектор контента и селектор элементов. Вам не нужно ничего менять в этих параметрах, потому что настройки по умолчанию работают достаточно хорошо.

В строке Image, у вас есть возможность загрузить пользовательский значок загрузчика контента. А также в строке Load More Text и Finish Text указать свой текст на русском языке:

Когда вы закончите настройку параметров, нажмите кнопку «Сохранить изменения». Для восстановления всех настроек плагина по умолчанию нужно активировать настройку Check to reset.

Обратите внимание, темы WordPress у всех разные. Catch Infinite Scroll хорошо работает с большинством тем WordPress. Однако, это может не сработать с некоторыми шаблонами. В таком случае вы можете использовать любой из следующих плагинов WP с бесконечной прокруткой.

Альтернативные плагины WordPress для добавления бесконечной прокрутки/скроллинга в WordPress.

WordPress Infinite Scroll – Ajax Load More

Идеальное решение для бесконечной прокрутки и отложенной загрузки для вашего сайта на платформе WordPress. Ajax Load More может бесконечно прокручивать любой тип контента, предлагаемый WordPress — от сообщений в блоге до многостраничного контента продуктов WooCommerce.

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

Ajax Load More — это плагин для WordPress с бесконечной прокруткой для отдельных сообщений, страниц, комментариев и другого с помощью запросов на основе Ajax.

Создавайте сложные пользовательские запросы WordPress с помощью конструктора шорткодов Ajax Load More, а затем добавляйте сгенерированный шорткод на свою страницу с помощью редактора контента или непосредственно в файлы шаблонов.

Ajax Load More совместим для бесконечной прокрутки с популярными плагинами электронной коммерции, такими как WooCommerce и Easy Digital Downloads.

Infinite Scroll and Ajax Load More

Бесконечная прокрутка или загрузить больше сообщений по нажатию кнопки без нумерации страниц.

Используя бесконечную прокрутку, вы можете перечислить все посты на одной странице, просто прокрутив страницу вниз.

Другой вариант — вы нажимаете кнопку «Загрузить еще» с помощью шорткода, при нажатии на кнопку «Загрузить больше» на той же странице отображается список сообщений.

Этот плагин используется на всех страницах листинга блога, таких как архив, категория и автор.

Полностью настраиваемый для адаптации к вашему сайту и теме. Вы можете изменить изображение загрузчика из настроек. Также для кнопки «Загрузить больше» вы можете изменить цвет кнопки и текст.

И последний плагин для интернет магазина.

YITH Infinite Scrolling WooCommerce

Добавьте бесконечную прокрутку к архивному сообщению или странице интернет магазина.

Бесконечная прокрутка для WooCommerce — плагин для WordPress. Что может быть лучшим решением, чем свобода предлагать своим клиентам весь контент, просто прокручивая страницу вниз? Вы сократите время загрузки следующих страниц и ваши клиенты смогут увидеть все результаты сразу.

Продукты загружаются в Ajax, а плагин работает на страницах блогов и магазинов. Вы можете включить плагин в разделе YITH Plugins — Infinite Scrolling.

Любой может легко настроить бесконечную прокрутку с помощью этого плагина. Тем не менее, он не имеет кнопки «Загрузить еще», которая включена в другие плагины упомянутых выше.

И в заключение

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

Бесконечная прокрутка — это только один из многих вариантов дизайна, который может улучшить взаимодействие с пользователем и его удержание на сайте. Тем не менее, это не является оптимальным для каждого сайта. Все зависит от того, чего вы пытаетесь достичь с помощью конкретной страницы.

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

Что вы думаете об этой технике? Вам это нравится? Вы бы использовали это? Поделитесь своими мыслями, используя раздел комментариев!

Я надеюсь, друзья, что этот пост помог вам узнать, как добавить бесконечный дизайн прокрутки в ваш любимый блог WP. Удачи всем и до новых встреч.

final class BannersView: UIView {
    private let scrollView = UIScrollView()

    private let leftItemView = UIImageView()
    private let centerItemView = UIImageView()
    private let rightItemView = UIImageView()

    init() {
        super.init(frame: .zero)
        self.setup()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setup() {
        self.addSubview(self.scrollView)
        self.setupScrollView()

        let imageViews = [self.leftItemView, self.centerItemView, self.rightItemView]
        imageViews.forEach(self.scrollView.addSubview)
    }
}

override func layoutSubviews() {
    super.layoutSubviews()
    self.scrollView.frame = self.bounds

    let horizontalItemOffsetFromSuperView: CGFloat = 16.0
    let spaceBetweenItems: CGFloat = 8.0
    let itemWidth = self.frame.width - horizontalItemOffsetFromSuperView * 2
    let itemHeight: CGFloat = self.scrollView.frame.height

    var startX: CGFloat = 0.0

    let imageViews = [self.leftItemView, self.centerItemView, self.rightItemView]
    imageViews.forEach { view in
        view.frame.origin = CGPoint(x: startX, y: 0.0)
        view.frame.size = CGSize(width: itemWidth, height: itemHeight)
        startX += itemWidth + spaceBetweenItems
    }

    let viewsCount: CGFloat = 3.0
    let contentWidth: CGFloat = itemWidth * viewsCount + spaceBetweenItems * (viewsCount - 1.0)
    self.scrollView.contentSize = CGSize(width: contentWidth, height: self.frame.height)
}

    let imageURLs = ImageURLFactory.makeImageURLS()
    imageViews.enumerated().forEach { key, view in
        view.setImage(with: imageURLs[key])
    }

self.scrollView.contentInset = UIEdgeInsets(top: 0.0, left: 16.0, bottom: 0.0, right: 16.0)
self.scrollView.delegate = self

extension BannersView: UIScrollViewDelegate {

  func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    let gap: CGFloat = self.centerItemView.frame.width / 3

    let targetRightOffsetX = targetContentOffset.pointee.x + self.frame.width
    if (self.rightItemView.frame.minX + gap) < targetRightOffsetX {
      targetContentOffset.pointee.x = self.rightItemView.frame.midX - self.frame.midX
    }
    else if (self.leftItemView.frame.maxX - gap) > targetContentOffset.pointee.x {
      targetContentOffset.pointee.x = self.leftItemView.frame.midX - self.frame.midX
    }
    else {
      targetContentOffset.pointee.x = self.centerItemView.frame.midX - self.frame.midX
    }
  }

}

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    guard
            self.leftItemView.frame.width > 0,
            self.centerItemView.frame.width > 0,
            self.rightItemView.frame.width > 0
            else {
        return
    }

    let gap: CGFloat = self.centerItemView.frame.width / 3
    let spacing: CGFloat = 8.0

    let currentRightOffset: CGFloat = scrollView.contentOffset.x + self.frame.width + scrollView.contentInset.left

    if (self.rightItemView.frame.maxX - gap) < currentRightOffset {
        scrollView.contentOffset.x -= self.centerItemView.frame.width + spacing
    } else if (self.leftItemView.frame.minX + gap) > scrollView.contentOffset.x {
        scrollView.contentOffset.x += self.centerItemView.frame.width + spacing
    }
}

func set(imageURLs: [URL]) {
    // добавляем контент на ImageView
    let imageViews = [self.leftItemView, self.centerItemView, self.rightItemView]
    imageViews.enumerated().forEach { key, view in
        view.setImage(with: imageURLs[key])
    }
    // выставляем изначальный контент оффсет, чтобы centerItemView был по центру
    self.scrollView.contentOffset.x = self.centerItemView.frame.minX - Constants.horizontalItemOffsetFromSuperView
}

self.scrollView.contentInset = UIEdgeInsets(top: 0.0, left: 300.0, bottom: 0.0, right: 300.0)

struct BannersViewModel {
    // здесь у нас гарантированно 3 ссылки или более на изображения
    let items: [URL] = ImageURLFactory.makeImageURLS()
}

    private var currentCenterItemIndex: Int = 0

    private var viewModel: BannersViewModel?

    private var leftItemViewModel: URL {
        guard let items = self.viewModel?.items else { fatalError("not ready") }
        let leftIndex = items.index(before: self.currentCenterItemIndex)
        return leftIndex < 0 ? items.last! : items[leftIndex]
    }
    private var centerItemViewModel: URL {
        guard let items = self.viewModel?.items else { fatalError("not ready") }
        return items[self.currentCenterItemIndex]
    }
    private var rightItemViewModel: URL {
        guard let items = self.viewModel?.items else { fatalError("not ready") }
        let rightIndex = items.index(after: self.currentCenterItemIndex)
        return rightIndex >= items.count ? items.first! : items[rightIndex]
    }

    func nextItem() {
        self.currentCenterItemIndex += 1
        if self.viewModel?.items.count == self.currentCenterItemIndex {
            self.currentCenterItemIndex = 0
        }
        self.updateViews()
    }

    func prevItem() {
        self.currentCenterItemIndex -= 1
        if self.currentCenterItemIndex == -1 {
            self.currentCenterItemIndex = self.viewModel?.items.indices.last ?? 0
        }
        self.updateViews()
    }

    private func updateViews() {
        self.leftItemView.setImage(with: self.leftItemViewModel)
        self.centerItemView.setImage(with: self.centerItemViewModel)
        self.rightItemView.setImage(with: self.rightItemViewModel)
    }

    func set(viewModel: BannersViewModel) {
        self.viewModel = viewModel
        self.updateViews()
        self.scrollView.contentOffset.x = self.centerItemView.frame.minX - Constants.horizontalItemOffsetFromSuperView
    }

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        .......

        if (self.rightItemView.frame.maxX - gap) < currentRightOffset {
            scrollView.contentOffset.x -= self.centerItemView.frame.width + spacing
            self.nextItem()
        } else if (self.leftItemView.frame.minX + gap) > scrollView.contentOffset.x {
            scrollView.contentOffset.x += self.centerItemView.frame.width + spacing
            self.prevItem()
        }
    }

struct BannersViewModel {
    let items: [Item]

    struct Item {
        let title: String
        let subtitle: String
        let imageUrl: URL
    }
}

extension BannersView {
    final class ItemView: UIView {
        private let titleLabel = UILabel()
        private let subtitleLabel = UILabel()
        private let imageView = UIImageView()

        init() {
            super.init(frame: .zero)
            self.setup()
        }

        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }

        private func setup() {
            self.addSubview(self.imageView)
            self.addSubview(self.titleLabel)
            self.addSubview(self.subtitleLabel)

            self.imageView.contentMode = .scaleAspectFill

            self.layer.masksToBounds = true
            self.layer.cornerRadius = 8.0
        }

        func set(viewModel: BannersViewModel.Item) {
            self.titleLabel.text = viewModel.title
            self.subtitleLabel.text = viewModel.subtitle
            self.imageView.setImage(with: viewModel.imageUrl)
        }

        override func layoutSubviews() {
            super.layoutSubviews()
            self.imageView.frame = self.bounds

            self.titleLabel.frame.origin = CGPoint(x: 16.0, y: 16.0)
            self.titleLabel.frame.size = CGSize(width: self.bounds.width - 32.0, height: 20.0)

            self.subtitleLabel.frame.origin = CGPoint(x: 16.0, y: self.titleLabel.frame.maxY + 4.0)
            self.subtitleLabel.frame.size = self.titleLabel.frame.size
        }
    }
}

    .......

    private let leftItemView = ItemView()
    private let centerItemView = ItemView()
    private let rightItemView = ItemView()
    
    private var leftItemViewModel: BannersViewModel.Item { ... }
    private var centerItemViewModel: BannersViewModel.Item { ... }
    private var rightItemViewModel: BannersViewModel.Item { ... }

    .......

    private func updateViews() {
        self.leftItemView.set(viewModel: self.leftItemViewModel)
        self.centerItemView.set(viewModel: self.centerItemViewModel)
        self.rightItemView.set(viewModel: self.rightItemViewModel)
    }

    .......