Panels Slide Component Documentation

Updated: 02/04/2019. Version: 1.5

ATTENTION: This version of component is outdated and will not be supported soon. We strongly recommend to use Flex Gallery component, which is more flexible alternative.

Note: Panels Slide component is not supported with MRAID based formats. It is compatible with Desktop and Mobile Web based formats which are using DHTML.js.

Example of Panels Slide Component: Standard Slider (Display)

Description

The following guidelines describe Panel Slide Component implementation and setup. Please follow the instructions bellow to correctly set up the component and change available parameters.

Initialization

How to start with PanelsSlide Component:

1. Add component files into templates assets folders.
2. Load it in your index.html file:

    <!-- Components -->
    <script src="//s1.adform.net/banners/scripts/components/Adform.PanelsSlide.js"></script>
    <!-- Components -->

3. Finish initialization by adding instance of the component and defining needed parameters. See the example bellow:

// 1. Create new instance
var panelsSlide = new Adf.PanelsSlide();

// 2. Initialize PanelsSlide
panelsSlide.init({
     direction: 'vertical',
     elementId: 'your-panels-holder-id',
     slideHeight: dhtml.height,
     panels: [
         {
             clicktag: Adform.getVar('clickTAG', '//www.adform.com'),
             target: Adform.getVar('landingPageTarget', '_blank')
         },
         {
             clicktag: Adform.getVar('clickTAG2', '//www.adform.com'),
             target: Adform.getVar('landingPageTarget', '_blank')
         },
         {
             clicktag: Adform.getVar('clickTAG3', '//www.adform.com'),
             target: Adform.getVar('landingPageTarget', '_blank')
         },
         {
             clicktag: Adform.getVar('clickTAG4', '//www.adform.com'),
             target: Adform.getVar('landingPageTarget', '_blank')
         }
     ]
 });

Slides Setup

To set up slides and their content, please use defined HTML structure (see bellow):

<div id="your-panels-holder-id">
    <div class="adf-PanelsWrapper">
        <!-- Slide -->
        <div class="adf-PanelParent">
            <div class="adf-Panel">
                <div class="adf-ClickArea">
                    <!-- YOUR HTML CONTENT -->
                </div>
            </div>
        </div>
        <!-- Slide -->
        <div class="adf-PanelParent">
            <div class="adf-Panel">
                <div class="adf-ClickArea">
                    <!-- YOUR HTML CONTENT -->
                </div>
            </div>
        </div>

        ... More Slides

    </div>
</div>

Additional Panels

To add additional panels, paste HTML code inside wrapper <div id="panels-wrapper" class="adf-PanelsWrapper"> any number of times:

<!-- Slide -->
<div class="adf-PanelParent">
    <div class="adf-Panel u-sizeFull">
        <!-- Panel content - you can edit content here -->

        <div class="adf-ClickArea u-sizeFull">
            <!-- HTML content -->
        </div>

        <!-- /Panel content -->
    </div>
</div>

Mandatory Settings

These are the properties that have to be set to complete the setup of Panels Slide component:

Name	Type	Description
elementId	string	Id name of the element containing PanelsSlide panels

Optional Settings

Name	Type	Default	Description
direction	string	vertical	PanelsSlide sliding direction, possible values vertical, horizontal
slideWidth	number	0	Single panel width in pixels, required if not assigned through .adf-Panel class
slideHeight	number	0	Single panel height in pixels, required if not assigned through .adf-Panel class
prevButtonId	string	none	Id assigned to previous slide navigation element
nextButtonId	string	none	Id assigned to next slide navigation element
panels	array	empty	Array of objects containing clickTAG and landingPageTarget values

Note: if you wish to use multiple navigation buttons just assign .panelsSlide-Button--prev class to all previous slide control elements and .panelsSlide-Button--next class to all next slide control elements.

Adding Other Component Into Slides

PanelsSlide component supports any HTML content which can be added inside <div class="adf-Panel u-sizeFull"></div> container. For example:

<!-- Slide -->
<div class="adf-PanelParent">
    <div class="adf-Panel u-sizeFull">
        <!-- Panel content - you can edit content here -->

        <div class="adf-ClickArea u-sizeFull">
            <div>User added content</div>
        </div>

        <!-- /Panel content -->
    </div>
</div>

Adding Video Container

To add Video Player Container component, add component files into templates and load it in your index.html document.

Also, you must initialize DHTML Video Player in <head> section:

<script>

    var components = [
        'VideoPlayer'
    ];
    document.write('<script src="'+ (window.API_URL || '//s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');

</script>

To initialize Video Player Container, add the following code to <script>:

var player = new Adf.VideoContainer({
    container: '#slide-video', // id or class of an element where the video should be rendered
    clicktag: clickTAGvalue,
    target: landingpagetarget,
    video: {
        poster: Adform.getAsset(5) // Link to additional assets or URL where poster can be found
    }
});

player.init(); // initialize video player

Next, add a relevant id to the slide where you want to render the video:

<div class="adf-PanelParent">
    <div class="adf-Panel u-sizeFull" id="slide-video">
    </div>
</div>

To find all available parameters and methods, please refer to Video Container documentation.

Methods

Possible exposed methods:

Name	Description
panelsSlide.disableSlide()	Prevents PanelsSlide from sliding
panelsSlide.enableSlide()	Reactivates PanelsSlide sliding ability
panelsSlide.on(eventName, listener)	Registers event listener for the provided event name. Available events: SLIDE_CHANGE_START, SLIDE_CHANGE_END, CLICKTAG_FIRED.
panelsSlide.off(eventName, listener)	Removes event listener. If listener is null or undefined, removes all listeners associated with the provided event name.