Slider

The slider can contain:
  • Video.
  • Image.
  • Link.
  • YAN ad block.

    To add ads to the slider, create an ad block for Turbo pages with display ads disabled.

    Disabling the display of media formats
    1. In the Yandex Advertising Network, go to the Products → RTB blocks page.
    2. Choose a block and click Edit.
    3. In the Strategy block, set the radio button to Separate CPM.
    4. Turn on the Set the CPM threshold or blocking for media advertising option and choose a value from the Blocking list.
<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="Sunset"/>
         </video>
        img src="https://clck.ru/Kiun7"/>
        <figcaption>Sunset timelapse</figcaption>
    </figure>
    <figure data-turbo-ad-id="first_YAN_ad_place"></figure>
     <figure>
        <figcaption>Sunset photo</figcaption>
        <img src="https://clck.ru/Kiun7"/>
    </figure>
    <figure data-turbo-ad-id="second_YAN_ad_place"></figure>
</div>
Copied to clipboard
Note. The slider doesn't support GIF animation.
Use the div element with the following attributes:
Attribute Description
data-block * Takes the slider value.
data-view Allows you to set the display of images. Possible values:
  • landscape (default) — Horizontal.
  • portrait — Portrait.
  • square — Square.
data-item-view Possible values:
  • contain (default value) — The content is scaled and displayed in full.
  • cover — The content fully covers the slider and may be cropped.
Attribute Description
data-block * Takes the slider value.
data-view Allows you to set the display of images. Possible values:
  • landscape (default) — Horizontal.
  • portrait — Portrait.
  • square — Square.
data-item-view Possible values:
  • contain (default value) — The content is scaled and displayed in full.
  • cover — The content fully covers the slider and may be cropped.

*Required attribute.

Inside the div element, use the following elements:

Element Description
header A general title to the whole slider. Displayed if none of the figure elements have captions.
figure *

Slider element. It can be the YAN ad block, a picture or a link.

figcaption Caption for the slider element.
img Picture.
a Link.
video Video block.
source * Video clip parameters.
Element Description
header A general title to the whole slider. Displayed if none of the figure elements have captions.
figure *

Slider element. It can be the YAN ad block, a picture or a link.

figcaption Caption for the slider element.
img Picture.
a Link.
video Video block.
source * Video clip parameters.

* Required element.

The figure element attribute.
Attribute Description
data-turbo-ad-id Add the ad block position ID specified in the turbo:adNetwork element or on the Turbo pages for content sites → Webmaster settings page.
The figure element attribute.
Attribute Description
data-turbo-ad-id Add the ad block position ID specified in the turbo:adNetwork element or on the Turbo pages for content sites → Webmaster settings page.
Video element attributes
Attribute Description
width * Width of the video block.
height * Height of the video block.
Video element attributes
Attribute Description
width * Width of the video block.
height * Height of the video block.
The source element attributes
Attribute Description
src * The video URL.
type * The type of video. The supported format is video/mp4.
data-duration * The displayed length of the video, integer.
data-title The title of the video block.
The source element attributes
Attribute Description
src * The video URL.
type * The type of video. The supported format is video/mp4.
data-duration * The displayed length of the video, integer.
data-title The title of the video block.

*Required attribute.