Слайдер

Слайдер может содержать следующие элементы:
  • Видео.
  • Картинка.
  • Ссылка.
  • Блок рекламы РСЯ. Чтобы добавить в слайдер рекламу, в Рекламной Сети Яндекса на странице Продукты → RTB-блоки → 2. Версия сайта создайте блок Адаптивный (Турбо). При этом отключите показ медийных форматов рекламы для блока типа «Версия сайта: Турбо-страницы».

    Как отключить показ медийных форматов
    1. В Рекламной Сети Яндекса перейдите на страницу Продукты → RTB-блоки.
    2. Выберите нужный блок и нажмите кнопку Редактировать.
    3. В блоке Стратегия установите переключатель в положение Раздельный CPM.
    4. Включите опцию Задать порог CPM или блокировку для медийной рекламы и выберите из списка значение Блокировка.


<div data-block="slider" data-view="landscape">
    <figure>
        <figcaption>Фото заката</figcaption>
        <img src="http://download.cdn.yandex.net/from/yandex.ru/support/ru/webmaster/files/sunset-lapse.jpg"/>
    </figure>
    <figure data-turbo-ad-id="first_YAN_ad_place"></figure>
    <figure>
        <video width="192" height="108">
            <source
                src="http://download.cdn.yandex.net/from/yandex.ru/support/ru/webmaster/files/sunset-lapse.mp4"
                type="video/mp4"
                data-duration=15
                data-title="Закат"/>
        </video>
        <img src="http://download.cdn.yandex.net/from/yandex.ru/support/ru/webmaster/files/sunset-lapse.jpg"/>
        <figcaption>Полюбуйтесь таймлапсом заката</figcaption>
    </figure>
    <figure data-turbo-ad-id="second_YAN_ad_place"></figure>
</div>
Примечание. Слайдер не поддерживает GIF-анимацию.
Используйте элемент div со следующими атрибутами:
Атрибут Описание
data-block * Принимает значение slider.
data-view Позволяет задать отображение картинок. Возможные значения:
  • auto (по умолчанию) — автоматический выбор отображения в зависимости от пропорций исходной картинки;
  • portrait — портрет;
  • landscape — альбом;
  • square — квадрат.
data-item-view Возможные значения:
  • cover — контент полностью покрывает слайдер, может обрезаться;
  • contain (по умолчанию) — контент масштабируется и отображается полностью.

* Обязательный атрибут.

Внутри элемента div используйте следующие элементы:

Элемент Описание
header Общая подпись ко всему слайдеру. Отображается, если ни у одного элемента figure нет подписи.
figure *

Элемент слайдера. Может быть рекламным блоком РСЯ, картинкой или ссылкой.

figcaption Подпись к элементу слайдера.
img Картинка.
a Ссылка.
video Видео-блок.
source * Параметры видео-ролика.

* Обязательный элемент.

Атрибут элемента figure
Атрибут Описание
data-turbo-ad-id В качестве значения добавьте ID позиции рекламного блока, указанный в элементе turbo:adNetwork или на странице Турбо-страницы → Настройки Яндекс.Вебмастера.
Атрибуты элемента video
Атрибут Описание
width * Ширина видео-блока.
height * Высота видео-блока.
Атрибуты элемента source
Атрибут Описание
src * URL видео.
type * Тип видео. Поддерживается video/mp4.
data-duration * Отображаемая длительность видео, целое число.
data-title Заголовок видео-блока

* Обязательный атрибут.