Slider component documentation!

enter image description here ATTENTION: This version of component is outdated and not supported anymore. We strongly recommend to use Flex Gallery component, which is more flexible alternative.

Use component at studio.

If you are more familiar with banners you can jump straight to quick-docs.

Initialize

var Slider = Adf.Slider;
Slider.init(options);

// append component to our banner
document.getElementById('bannerWrap').appendChild(Slider.containerElement);

Control

Slider.slideLeft()
Slider.slideRight()

Read more at Actions.

Listen to

Slider.on(Slider.EVENTS.TRANSITION_START, function(metaData){
    // Do something
})

Read more at Events.

Configure (options)

This component has a lot of default options, however they can be modified. They are provided as an object during Slider.init(options). You can jump straight to examples to see full configurations.

Options.orientation (optional)

By default component rotation is horizontal, but you can change it to vertical by specifying it in options.

var options = {
    isVertical: true
}

Options.animation (optional)

To configure slide animation add animation object to options.

var options = {
    animation: {
        scaleAtTheStart: 1, 
        transitionDuration: 1.5,
        scaleAtTheEnd: 1,
        panelDistance: 1,
        easing: 'linear'
    }
}
scaleAtTheStart
Panel size scale when it is at center of container.
Type: number
Default: 1
scaleAtTheEnd
Panel size scale when it has transition from center to the side (after transitionDuration has passed).
Type: number
Default: 1
transitionDuration
Animation time in seconds.
Type: number
Default: 1.5
panelDistance
Distance between panels, where 1 means that they are next to each other, 0.5 that one panel covers half of other and 0, that they overlay each other.
Type: number
Default: 1
easing
The rate of change of animation over time. Read more at http://easings.net/.
Type: string
Default: easeInOutQuad
options: linear - no easing, no acceleration; easeInQuad - accelerating from zero velocity; easeOutQuad - decelerating to zero velocity; easeInOutQuad - acceleration until halfway, then deceleration.

Options.autoRotation (optional)

To include auto-rotation in the component add autoRotator variable to options. 

var options = {
    animation: {
        ...
    },

    autoRotator: {
        plan: Slider.ACTIONS.SLIDE_RIGHT,
        timeout: true
    }
}
plan
Slide direction, value can be Slider.ACTIONS.SLIDE_RIGHT, Slider.ACTIONS.SLIDE_LEFT, Slider.ACTIONS.SLIDE_UP, Slider.ACTIONS.SLIDE_DOWN.
Type: ACTION {number}
timeout
Should component stop auto-rotating after 25 seconds.
Type: boolean
Default: true

Pausing auto-rotation

It automatically pauses for 10 seconds on any user interaction, for example if every 9 seconds user move over or clicks banner, it will always be paused.

RTB

It automatically stop auto-rotation after 25 seconds. To turn it off, set timeout to false.

Advanced configuration

autoRotator: {
    plan: [[<banner action>, <times>, <delay>], <delay>, [<banner action>, <times>, <delay>], ...],
    startDelay: 1.5,
    pauseTime: 10,
    timeoutTime: 25
}

Options.panels (required)

Panels are proved as an array in options, where each value in array is considered a panel. Minimum number of panels is 2, maximum unlimited.

There are few different way you can define a panel:

1) Simply by providing an image url from additional assets with html.getAsset(n), in this case an <img/> elements will be created with global clickTAGs.

var options = {
    animation: {
        ...
    },

    autoRotator: {
        ...
    },

    panels: [
        dhtml.getAsset(1),
        dhtml.getAsset(2),
        dhtml.getAsset(3),
    ]
}

2) By providing an object with element and clickTAG properties, in this case a provided clickTAG will be used for panel. If clickTAG propery is not defined, then panel will have no clickTAG.

    panels: [{
            element: ANY_DOM_ELEMENT_1,
            clickTAG: 'https://www.adform.com'
        }, {
            element: ANY_DOM_ELEMENT_2,
            clickTAG: 'https://www.adform.com'
        }, {
            element: ANY_DOM_ELEMENT_3,
            clickTAG: 'https://www.adform.com'
        },

    ]

You can also define callbacks to be invoked when panel slides into center (onShow) and when slides out (onHide).

panels: [
    ...
    {
        element: ANY_DOM_ELEMENT_1,
        clickTAG: 'https://www.adform.com',
        onShow: function() {},
        onHide: function() {}
    }
    ...
]

Actions

Adf.Slider has these actions (methods):

init(options)
Initializes banner configuration.
Arguments: options {object}.
on(EVENT_NAME, callback)
Subscribe to banner events.
Arguments: EVENT_NAME {number}, callback {function}.
slideLeft()
Slides current panel to the left.
slideRight()
Slides current panel to the right.
slideUp()
Slides current panel up (isVertical must be set to true).
slideDown()
Slides current panel down (isVertical must be set to true).
addPanel()
Can be used to add additional panel after init has been called.
removePanel(panel)
Can be used to remove panel at any time.

All available actions are defined at Adf.Slider.ACTIONS and can be invoked directly on component Adf.Slider.slideLeft or passed on as Adf.Slider.ACTIONS.SLIDE_LEFT to auto-rotator to be invoked later .

Events

To subscribe to events call Adf.Slider.on(EVENT_NAME, callback) method.

Event constants can be found at: Adf.Slider.EVENTS {object}.

Animation events

EVENT ARGUMENTS COMMENTS
TRANSITION_START {direction: string} fires before transition animation starts
TRANSITION_END {direction: string} fires after animation ends

User interaction events

EVENT ARGUMENTS COMMENTS
WHEEL_UP -
WHEEL_DOWN -
SWIPE_LEFT event
SWIPE_RIGHT event
SWIPE_UP event
SWIPE_DOWN event
MOUSEOVER event
MOUSEOUT event
CLICK event

Examples

Simple #1
Studio

var Slider = Adf.Slider;

/* Initialize banner */
Slider.init({
    panels: [
        dhtml.getAsset(1),
        dhtml.getAsset(2),
        dhtml.getAsset(3),
        dhtml.getAsset(4),
    ]
});

Simple #2
Studio

var Slider = Adf.Slider;

/* Initialize banner */
Slider.init({
    animation: {
        scaleAtTheStart: 1,
        transitionDuration: 0.7,
        scaleAtTheEnd: 0.5,
        panelDistance: 0.7
    },
    autoRotator: {
        plan: Slider.ACTIONS.SLIDE_RIGHT
    },
    panels: [
        dhtml.getAsset(1),
        dhtml.getAsset(2),
        dhtml.getAsset(3),
        dhtml.getAsset(4),
    ]
});

Advanced #1
Studio


function createImgElement(src) {
    var element = document.createElement('img');
    element.src = src;
    return element
}


Slider.init({
    animation: {
        scaleAtTheStart: 1,
        transitionDuration: 0.7,
        scaleAtTheEnd: 0.5,
        panelDistance: 0.7
    },
    autoRotator: {
        plan: [
            [Slider.ACTIONS.SLIDE_RIGHT, 5, 1], 2, [Slider.ACTIONS.SLIDE_LEFT, 10, 3]
        ] // slide right 5 times every 1 sec, 2 sec pause, slide left 10 times every 3 sec
    },
    panels: [{
        element: createImgElement(dhtml.getAsset(1)),
        clickTAG: 'http://www.example.com'
    }, {
        element: createImgElement(dhtml.getAsset(2)),
        clickTAG: 'http://www.adform.com'
    }, {
        element: createImgElement(dhtml.getAsset(3)),
        clickTAG: 'http://www.google.com'
    }, {
        element: createImgElement(dhtml.getAsset(4))
    }]
});

Advanced #2
Studio


function createImgElement(src) {
    var element = document.createElement('img');
    element.src = src;
    return element
}

var Slider = Adf.Slider;

/* Initialize banner */
Slider.init({
    animation: {
        scaleAtTheStart: 1,
        transitionDuration: 0.5,
        scaleAtTheEnd: 1,
        panelDistance: 1
    },
    autoRotator: {
        startDelay: 3,
        plan: [
            [Slider.ACTIONS.SLIDE_RIGHT, 5, 1], 2, [Slider.ACTIONS.SLIDE_LEFT, 10, 3]
        ]
    },
    panels: [{
        element: createImgElement(dhtml.getAsset(1)),
        clickTAG: 'http://www.example.com',
        onShow: function() {
            console.log('SHOW Panel 1!')
        },
        onHide: function() {
            console.log('HIDE Panel 1!')
        }
    }, {
        element: createImgElement(dhtml.getAsset(2)),
        onShow: function() {
            console.log('SHOW Panel 2!')
        },
        onHide: function() {
            console.log('HIDE Panel 2!')
        }
    }]
});

Quick-docs

var Slider = Adf.Slider;

/* Initialize banner */
Slider.init({
    isVertical: false,
    animation: { /* optional */
        scaleAtTheStart: 1, // transform: scale() when banner is in center
        transitionDuration: 0.5, // in seconds
        scaleAtTheEnd: 1, // transform: scale() when banner is out of center
        panelDistance: 1, // 1 - panels are next to each other, 0 - they overlap
        easing: 'linear' // linear, easeInQuad, easeOutQuad, easeInOutQuad
    },
    autoRotator: { /* optional */
        startDelay: 3, // in seconds
        plan: [
            [Slider.ACTIONS.SLIDE_RIGHT, 100, 1], 2, [Slider.ACTIONS.SLIDE_LEFT, 10, 3]
        ] // [[direction, times, delay], delay, [...]]
    },
    panels: [{ /* required */
        element: createImgElement(dhtml.getAsset(1)),
        clickTAG: 'http://www.example.com',
        onShow: function() {
            console.log('SHOW Panel 1!')
        },
        onHide: function() {
            console.log('HIDE Panel 1!')
        }
    }, {
        element: createImgElement(dhtml.getAsset(2)),
        onShow: function() {
            console.log('SHOW Panel 2!')
        },
        onHide: function() {
            console.log('HIDE Panel 2!')
        }
    }]
});