Lorem 1

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum.

Lorem 2

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum.

Lorem 3

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum.

Lorem 1

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum.

Lorem 2

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum.

Lorem 3

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum.

AZ Background Slider

Default settings

new AZBackgroundSlider(
{
    azBackgroundSliderId: "",
    azBackgroundSliderDir: "horizontal",
    azBackgroundSliderWidth: 500,
    azBackgroundSliderHeight: 300
});

Init AZBackgroundSlider

There are two ways to initiate the AZBackgroundSlider. The way you choose is important for further use of the function.

1. new AZBackgroundSlider();
The function is initiated but you do not assign the function to a variable. This means that you can not directly interact with the function.

2. var AZBackgroundSlider = new AZBackgroundSlider();
The function is initiated and assigned to a variable. This means you can use the variable in relation to further interaction with the function.

Whatever approach you choose, you can use the following features (Events):

azBackgroundSliderReady

azBackgroundSliderId Type: String Default: ""
azBackgroundSliderDir Type: String Default: "horizontal" Values: "horizontal" or "vertical"
azBackgroundSliderWidth Type: Integer Default: 500 Unit: px
azBackgroundSliderHeight Type: Integer Default: 300 Unit: px
functionlib/azBackgroundSliderReady Type: Function
$.subscribe("functionlib/azBackgroundSliderReady", function (e, data)
{
    data.$BackgroundSlider - i.fn.init[]
    data.$BackgroundSliderWrapper: i.fn.init[]
    data.$BackgroundSliderContent - i.fn.init[]
    data.azBackgroundSliderId - your id
});

This function is triggered when AZBackgroundSlider is fully initiated. By subscribing to the function, you will get a better flow in your own code.

AZ Background Slider HTML and CSS

<div id="az-background-slider-1">
    <div class="az-background-slider-wrapper">

        <div class="az-background-slider-content">
            Content
        </div>

    </div>
</div>


AZ Background Slider has some CSS that you can find here: backgroundslider.css