Слайдеры

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

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

Поведение включает расширение landing_carousel: его подключают в манифесте блока.

Как настроить слайдерКак настроить слайдер

Минимальный вариант:

'assets' => [
    'ext' => ['landing_carousel'],
],

<div class="js-carousel">
    <div class="js-slide">Slide 1</div>
    <div class="js-slide">Slide 2</div>
</div>

Что делает расширение Что делает расширение landing_carousel

Расширение находит контейнеры с классом js-carousel, собирает слайдер из их прямых потомков и читает настройки из data-* атрибутов контейнера. Отдельный селектор слайда расширение не задает: слайдом становится каждый прямой потомок контейнера.

Стрелки и пагинацию расширение добавляет само: в разметке блока их нет. Появятся они, только если заданы классы оформления — data-arrows-classes для стрелок и data-pagi-classes для пагинации. Без этих атрибутов элементы управления не создаются: задать одни лишь data-arrow-left-classes и data-arrow-right-classes недостаточно.

Слайдер построен на библиотеке Slick, поэтому внутри data-responsive используются имена ее параметров, а не имена data-* атрибутов.

РазметкаРазметка

В разметке используются два служебных класса:

• js-carousel — корневой контейнер слайдера
• js-slide — отдельный слайд. Этот класс нужен для оформления: по нему подключаются стили штатных блоков. На поиск слайдов он не влияет

По умолчанию слайдер показывает один слайд, без стрелок, пагинации и автопрокрутки. Поведение настраивается через data-* атрибуты на элементе js-carousel.

Основные атрибутыОсновные атрибуты

Логические атрибуты принимают значения true и false.

Адаптивные правила Адаптивные правила data-responsive

В data-responsive передают валидный JSON-массив. У каждого правила два ключа:

• breakpoint — ширина экрана в пикселях
• settings — настройки для этого брейкпоинта

Внутри settings используются имена параметров Slick:

ПримерПример

<div class="js-carousel"
    data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-45 g-height-45 g-color-white g-bg-primary"
    data-arrow-left-classes="fa fa-chevron-left g-left-0"
    data-arrow-right-classes="fa fa-chevron-right g-right-0"
    data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-60 text-center"
    data-slides-show="3"
    data-slides-scroll="2"
    data-autoplay="true"
    data-speed="1000"
    data-pause-hover="true"
    data-center-mode="true"
    data-center-padding="40px"
    data-initial-slide="1"
    data-adaptive-height="true"
    data-lazy-load="ondemand"
    data-responsive='[
        {
            "breakpoint": 768,
            "settings": {
                "slidesToShow": 2
            }
        },
        {
            "breakpoint": 576,
            "settings": {
                "slidesToShow": 1
            }
        }
    ]'>

    <div class="js-slide g-height-50vh g-brd-gray-light-v3 g-brd-around g-bg-primary-opacity-0_1">
        <div class="g-flex-centered w-100 h-100">
            <h3>Slide 1</h3>
        </div>
    </div>

    <div class="js-slide g-height-50vh g-brd-gray-light-v3 g-brd-around g-bg-primary-opacity-0_1">
        <div class="g-flex-centered w-100 h-100">
            <h3>Slide 2</h3>
        </div>
    </div>
</div>

Совмещение с галереейСовмещение с галереей

Слайдер сочетается с галереей: изображения листаются в блоке и открываются в окне просмотра. Порядок подключения расширений важен, он описан в статье Галереи.

Примеры штатных блоковПримеры штатных блоков

Коды некоторых штатных блоков:

• 01.big_with_text
• 01.big_with_text_blocks
• 28.5.team_4_cols_slider
• 39.1.five_blocks_carousel
• 45.2.gallery_app_with_slider — с галереей

Как изменить настройки слайдера через RESTКак изменить настройки слайдера через REST

Поведение слайдера задают data-* атрибуты контейнера, поэтому их значения меняет метод landing.block.updateattrs. Доступны только те атрибуты, которые описаны в ключе attrs манифеста блока.

Слайды — это карточки блока, поэтому их состав меняют методы landing.block.addcard, landing.block.clonecard, landing.block.removecard и landing.block.updateCards, а содержимое слайда — landing.block.updatenodes.

Права и ограниченияПрава и ограничения

Scope: landing

Кто может выполнять метод: в зависимости от метода

Ограничения:

• свой класс контейнера задать нельзя: расширение ищет js-carousel
• в редакторе зацикливание принудительно отключается, поэтому data-infinite проверяют в превью или на опубликованной странице
• при включенном data-vertical одновременно работает вертикальный свайп, поэтому для мобильных вертикальный режим обычно отключают правилом в data-responsive

Продолжите изучениеПродолжите изучение

• Интерактивные блоки: обзор сценариев
• Галереи
• Счетчики обратного отсчета
• Файл манифеста
• Типы нод