Слайдер и вкладки
Слайдер и вкладки внутри устроены одинаково.
Элемент, в котором размещены слайды, помечается атрибутом cr-slider-container. Слайды (или вкладки) помещаются туда автоматически.
Перелистывание
Кнопка перелистывания вперед помечается атрибутом cr-slider-next.
Кнопка перелистывания назад помечается атрибутом cr-slider-previous.
Список слайдов
Чтобы сделать точки для каждого слайда необходимо использовать атрибут cr-slider-pagination. При том внутри элемента с этим атрибутом должен находиться всегда только 1 элемент с атрибутом cr-slider-page.
Пример:
Для каждого слайда элемент cr-slider-page будет продублирован. Элемент, указывающий на активный слайд, будет иметь класс is-active.
Внутри cr-slider-page можно использовать произвольную верстку. Доступны так же следующие специальные элементы:
cr-slider-page_number - номер слайда
cr-slider-page_label - название слайда
cr-slider-page_icon - иконка слайда. Для указания цвета иконки используйте атрибут color.
Пример:
Секция Слайдер
Идентично компоненту «Слайдер», только не используется элемент cr-slider-container.
При этом весь редактируемый HTML код помещен внутрь position:absolute элемента, растянутого по ширине и высоте всей секции.
Если нужно обратиться к CSS-свойствам слайда, можно использовать селектор .section-slider-container.