Слайдер

Слайдер может содержать:
  • видео;
  • картинку;
  • ссылку;

  • рекламный блок РСЯ.

    Чтобы добавить рекламу в слайдер, создайте рекламный блок для Турбо-страниц с отключенной медийной рекламой.

    Как отключить показ медийных форматов
    1. В Рекламной Сети Яндекса перейдите на страницу Продукты → RTB-блоки.
    2. Выберите нужный блок и нажмите кнопку Редактировать.
    3. В блоке Стратегия установите переключатель в положение Раздельный CPM.
    4. Включите опцию Задать порог CPM или блокировку для медийной рекламы и выберите из списка значение Блокировка.
<div data-block="slider" data-view="landscape">
    <figure>
        <video width="192" height="108">
            <source
                src="https://clck.ru/Kiunj"
                type="video/mp4"
                data-duration=15
                data-title="Закат"/>
        </video>
        <img src="https://clck.ru/Kiun7"/>
        <figcaption>Таймлапс заката</figcaption>
    </figure>
    <figure data-turbo-ad-id="first_YAN_ad_place"></figure>
    <figure>
        <figcaption>Фото заката</figcaption>
        <img src="https://clck.ru/Kiun7"/>
    </figure>
    <figure data-turbo-ad-id="second_YAN_ad_place"></figure>
</div>
Скопировано
Примечание. Слайдер не поддерживает GIF-анимацию.
Используйте элемент div со следующими атрибутами
Атрибут Описание
data-block * Принимает значение slider.
data-view Позволяет задать отображение картинок. Возможные значения:
  • landscape (по умолчанию) — альбом;
  • portrait — портрет;
  • square — квадрат.
data-item-view Возможные значения:
  • contain (по умолчанию) — контент масштабируется и отображается полностью.
  • cover — контент полностью покрывает слайдер, может обрезаться;
Атрибут Описание
data-block * Принимает значение slider.
data-view Позволяет задать отображение картинок. Возможные значения:
  • landscape (по умолчанию) — альбом;
  • portrait — портрет;
  • square — квадрат.
data-item-view Возможные значения:
  • contain (по умолчанию) — контент масштабируется и отображается полностью.
  • cover — контент полностью покрывает слайдер, может обрезаться;

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

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

Элемент слайдера. Может быть рекламным блоком РСЯ, картинкой или ссылкой.
figcaption Подпись к элементу слайдера.
img Картинка.
a Ссылка.
video Видео-блок.
source * Параметры видео-ролика.
Внутри элемента div используйте следующие элементы
Элемент Описание
header Общая подпись ко всему слайдеру. Отображается, если ни у одного элемента figure нет подписи.
figure *

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

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

Атрибут элемента figure
Атрибут Описание
data-turbo-ad-id В качестве значения добавьте ID позиции рекламного блока, указанный в элементе turbo:adNetwork или на странице Турбо‑страницы для контентных сайтов → Настройки Вебмастера.
Атрибут элемента figure
Атрибут Описание
data-turbo-ad-id В качестве значения добавьте ID позиции рекламного блока, указанный в элементе turbo:adNetwork или на странице Турбо‑страницы для контентных сайтов → Настройки Вебмастера.

Атрибуты элемента video
Атрибут Описание
width * Ширина видео-блока.
height * Высота видео-блока.
Атрибуты элемента video
Атрибут Описание
width * Ширина видео-блока.
height * Высота видео-блока.

Атрибуты элемента source
Атрибут Описание
src * URL видео.
type * Тип видео. Поддерживается video/mp4.
data-duration * Отображаемая длительность видео, целое число.
data-title Заголовок видео-блока
Атрибуты элемента source
Атрибут Описание
src * URL видео.
type * Тип видео. Поддерживается video/mp4.
data-duration * Отображаемая длительность видео, целое число.
data-title Заголовок видео-блока

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