PageBuilder
Визуальный конструктор секций для MODX 3: черновик и публикация без перезаписи content ресурса
Карусель галереи
Те же слайды, что в Галерее, но по одному на экране с листанием. Можно включить автопрокрутку.
Информация
Требуется PageBuilder Pro.
Карусель вместо сетки
- Экономит высоту страницы на мобильном
- Автопрокрутка опциональна
- Те же поля слайдов, что у Галереи
Где уместна
- Для баннеров на главной
- В портфолио: крупные превью работ
- Для фото товара: несколько ракурсов на лендинге
Примеры страниц
Слайды и автопрокрутка
Repeater Слайды как в галерее. Автовоспроизведение включает таймер. На фронте нужен pagebuilder-sections.js.
Похожие секции
- Галерея для сетки всех кадров сразу
- Карусель товаров для SKU (Pro, MS3)
Параметры блока
| Параметр | Значение |
|---|---|
| key | gallery_carousel |
| Слой | Pro |
| Категория | медиа (media) |
| Chunk | pagebuilderpro_gallery_carousel |
| Требования | pro |
Поля в редакторе
Заполните поля в инспекторе секции на ресурсе. Описание типов полей: справочник типов.
Заголовок (title)
Тип text. Необязательное.
Автовоспроизведение (autoplay)
Тип yesno. Необязательное. Переключатель да/нет.
Слайды (items)
Тип repeater. Обязательное. Повторяющиеся строки. Кнопка «Добавить» в инспекторе.
В каждой строке:
| Поле | Тип | Подпись | Обязательно |
|---|---|---|---|
image | image | Изображение | да |
alt | text | Alt-текст | нет |
caption | text | Подпись | нет |
Что видит посетитель
Карусель pb-carousel с partial изображений.
Данные секции
Пример JSON после сохранения секции. Для media, video и map значения на выводе могут быть обогащены:
json
{
"title": "Заголовок секции",
"autoplay": false,
"items": [
{
"_rowId": "00000000-0000-4000-8000-000000000001",
"image": {
"url": "assets/images/example.jpg",
"id": 12,
"filename": "example.jpg",
"extension": "jpg",
"title": "example.jpg",
"width": 1920,
"height": 1080,
"type": "image"
},
"alt": "Описание изображения для скринридеров",
"caption": "Подпись под изображением"
}
]
}Шаблон chunk
Fenom chunk pagebuilderpro_gallery_carousel:
fenom
{var $slideCount = $items|count}
<section
class="pb-section pb-section--gallery-carousel pb-gallery-carousel{if $cssClass} {$cssClass|escape}{/if}"
data-pb-section="gallery_carousel"
data-pb-carousel
data-pb-autoplay="{$autoplay|default:0}"
{if $id} id="pb-{$id|escape}"{/if}
>
<div class="pb-section__inner">
{if $title}
<h2 class="pb-heading">{$title|escape}</h2>
{/if}
<div class="pb-carousel__viewport" tabindex="0" role="region" aria-roledescription="carousel" aria-label="{$title|default:'Gallery'|escape}">
<div class="pb-carousel__track">
{foreach $items as $item}
<figure class="pb-carousel__slide" role="group" aria-roledescription="slide" aria-label="{$item@index + 1} / {$slideCount}">
{include 'pagebuilder_partial_image' image=$item.image alt=($item.alt ?: $item.caption) class='pb-carousel__media'}
{if $item.caption}
<figcaption class="pb-carousel__caption">{$item.caption|escape}</figcaption>
{/if}
</figure>
{/foreach}
</div>
{if $slideCount > 1}
<div class="pb-carousel__controls">
<button type="button" class="pb-carousel__btn" data-pb-carousel-prev aria-label="Previous slide">‹</button>
<button type="button" class="pb-carousel__btn" data-pb-carousel-next aria-label="Next slide">›</button>
</div>
<div class="pb-carousel__dots" role="tablist" aria-label="Slides">
{foreach $items as $item}
<button
type="button"
class="pb-carousel__dot{if $item@first} pb-carousel__dot--active{/if}"
data-pb-carousel-dot="{$item@index}"
role="tab"
aria-label="Slide {$item@index + 1}"
{if $item@first}aria-selected="true"{/if}
></button>
{/foreach}
</div>
{/if}
</div>
</div>
</section>JSON-определение
PageBuilderPro/core/components/pagebuilderpro/sections/gallery_carousel.json