Слайдер и вкладки

Слайдер и вкладки внутри устроены одинаково.

Элемент, в котором размещены слайды, помечается атрибутом cr-slider-container. Слайды (или вкладки) помещаются туда автоматически.

Перелистывание

Кнопка перелистывания вперед помечается атрибутом cr-slider-previous.

Кнопка перелистывания назад помечается атрибутом cr-slider-next.

Список слайдов

Чтобы сделать точки для каждого слайда необходимо использовать атрибут cr-slider-pagination. При том внутри элемента с этим атрибутом должен находиться всегда только 1 элемент с атрибутом cr-slider-page.

Пример:

<div cr-slider-pagination>
    <div cr-slider-page></div>
</div>

Для каждого слайда элемент cr-slider-page будет продублирован. Элемент, указывающий на активный слайд, будет иметь класс is-active.

Внутри cr-slider-page можно использовать произвольную верстку. Доступны так же следующие специальные элементы:

cr-slider-page_number - номер слайда cr-slider-page_label - название слайда cr-slider-page_icon - иконка слайда. Для указания цвета иконки используйте атрибут color.

Пример:

<div cr-slider-pagination>
  <div cr-slider-page>
    <div cr-slider-page_icon color="white"></div>
  </div>
</div>

Секция Слайдер

Идентично компоненту «Слайдер», только не используется элемент cr-slider-container.

При этом весь редактируемый HTML код помещен внутрь position:absolute элемента, растянутого по ширине и высоте всей секции.

Если нужно обратиться к CSS-свойствам слайда, можно использовать селектор .section-slider-container.

Поддержка в Telegram-чате

Подскажем, как решить вашу задачу!

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