Допустим, что вы продаете велосипеды и самокаты, и хотите показать весь ассортимент товаров, но не хотите сильно увеличивать размеры страницы показывая на ней сразу все фотографии. В этом случае можно настроить пролистывание картинок по группам.
1. Для удобства просмотра и с целью экономии места на странице добавим "Секцию с блоками", а в её настройках укажем, что в одном ряде должны размещаться две колонки.
![](../../i/o/90240392/31219a46d974b3250efd7106/1.jpg)
2. Под основными фотографиями товаров добавим виджеты "Текст", "Колонки" и в каждую колонку по несколько картинок.
![](../../i/o/90240407/a23591304cee18cded09db62/2.jpg)
В редакторе это будет выглядеть так:
![](../../i/o/90240421/a31c169d90b7933efe706e55/3.jpg)
3. В настройках картинок укажем действие "Увеличить картинку" и напишем название группы картинок, которые должны пролистываться. Группу нужно указать одинаковую для всех картинок одного типа. Для другой группы картинок - другое название группы.
![](../../i/o/301237532/31449d4b051675a70a2fb1f1/03278f8dd2.png)
Для остальных фото из этой же группы указываем аналогичные названия группы.
![](../../i/o/301237544/61542ae1ec01474ccf0bfc7d/3e546ad694.png)
4. Здесь, по идеи мы может не скрывать маленькие фото велосипедов, а показывать их на сайте, чтобы посетитель мог нажать на любую из них и увеличить фото. Но если бы здесь у нас было не +10 фото, а +100, тогда нам бы пришлось скрыть все иконки или их часть.
Для этого у виджета "Колонки" в настройках кнопки "Капелька" на вкладке "Параметры" в поле "class" укажем слово - hidden
![](../../i/o/90240510/465de4bd9482c1b8bd66db86/6.jpg)
Заметка: указав класс hidden в настройках любой секции или виджета приведет к скрытию этого объекта на странице, но при этом все элементы этого объекта будут доступны для использования. Например, мы могли бы указать этот класс в настройках каждой картинки по отдельности и результат был бы тот же.
5. Чтобы проверить корректность настройки, повторно опубликуем страницу, так как в редакторе картинки не будут скрыты, а при клике на картинку открывается окно для загрузки картинки.
Для просмотра страницы с примером в редакторе перейдите по этой ссылке, а чтобы просмотреть её в опубликованном виде - по этой ссылке.
![](../../i/o/90239894/cdf187318ee08d1d27d4e5f1/1x1px.png)
![](../../i/o/90239867/187446796ec41dea2340ed10/1x1px.png)