Element parameters

You can use/change the following options in the slider setup method. For example:

<script>
    jQuery(document).ready(function($) {
        $("#slider-wrapper").transitionSlider({
            slides: [
                {
                    src: "../assets/images/1.jpg",
                    layerWidth: 1500,
                    layerHeight: 950,
                    elements: [
                        {
                            type: "text",
                            content: "Content for text element.",
                            textColor: "#ffffff",
                            fontSize: "70px",
                            fontFamily: "Pacifico",
                            padding: "10px 100px 10px 100px",
                            backgroundColor: "rgba(0,0,0,0)",
                            position: {
                                x: "center",
                                y: "center",
                                offsetX: 0,
                                offsetY: 30
                            },
                            startAnimation: {
                                animation: "fadeInDown",
                                speed: 1000
                            },
                            endAnimation: {
                                animation: "fadeOutUp",
                                speed: 500,
                                delay: 500
                            },
                            hover: {
                                backgroundColor: "rgba(100,100,100,1)",
                                borderColor: "rgba(20,20,20,0)",
                                textColor: "#cccccc",
                                padding: "30px 30px 30px 30px"
                            }
                        }
                }
            ]
        );
    });
</script>

There are 6 types of layer elements:

• Text

• Heading

• Image

• Button

• Video

• iFrame

Below is a set of parameters for each type of element.

Text

Parameter	Type	Default	Description
type	string	"text"	Defines type of the element. (Value for text element is "text".)
htmlTag	string	"p"	Defines html tag of text element. (Default element tag paragraph).
content	string		Content of text element.
textColor	string		Font color of the text element. (Example: "#ffffff").
fontSize	number/string		Font size of the text element. If value is number then default unit is px. Also it’s possible to put size as string with any unit next to the number ("12pt"). All CSS units can be found here.
fontFamily	string		Font family of the text element. It’s possible to put any Google Font name (Example: "Pacifico"). All Google Fonts can be found here.
padding	string		Padding of the text element. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)
paddingTop	string		Padding top of the text element. Example format: "20px"There are properties for setting the padding only for one side of an element (top). (more details here)
paddingRight	string		Padding right of the text element. Example format: "20px"There are properties for setting the padding only for one side of an element (right). (more details here)
paddingBottom	string		Padding bottom of the text element. Example format: "20px"There are properties for setting the padding only for one side of an element (bottom). (more details here)
paddingLeft	string		Padding left of the text element. Example format: "20px"There are properties for setting the padding only for one side of an element (left). (more details here)
backgroundColor	string		Background color of the text element. Example format: "#FF0000"(more details here)
fontWeight	string		Font weight of the text element. Example format: "bold"(more details here)
lineHeight	string		Line height of the text element. Example format: "12px"(more details here)
textAlign	string		Text align of the text element. Example format: "center"(more details here)
borderWidth	number/string		Sets the width of an element’s four borders. If parameter is number then default unit is in px. If value is string then value must contain units as well. This property can have from one to four values. Example format: "2px"(more details here)
borderStyle	string		Sets the style of an element’s four borders. This property can have from one to four values. Example format: "solid"(more details here)
borderColor	string		Sets the color of an element’s four borders. This property can have from one to four values. Example format: "#ff0000"(more details here)
borderRadius	number/string		Property defines the radius of the element’s corners. If parameter is number then default unit is in px. If value is string then value must contain units as well. This property can have from one to four values. Here are the rules: "15px 50px 30px 5px" (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner) (more details here).
width	number/string		Property defines the width of the element. If parameter is number then default unit is in px. If value is string then value must contain units as well. Example: "150px".
height	number/string		Property defines the height of the element. If parameter is number then default unit is in px. If value is string then value must contain units as well. Example: "150px".
customCSS	string		If you miss any CSS property add it here. Example: "margin-top: 15px; opacity: 0.5;".
cssClass	string		Add your custom CSS class WITHOUT the dot, e.g: my-class. Add multiple classes separated with space, e.g: my-class my-class-2. Classes for slide navigation: slide-next, slide-prev. Classes for go to slide: slide-1, slide-2, ...
hover	object	false	Object with custom navigation parameters in the hover state. All CSS parameters can be added in this format (check list of all properties here), example: CSS property background-color should be backgroundColor. Check some of the properties we recommend below.
{
width	string		The width property sets the width of the text element. Example format: "150px"(more details here)
height	string		The height property sets the height of the text element. Example format: "50px"(more details here)
backgroundColor	string		Background color on the text element. Example format: "#FF0000"(more details here)
padding	string		Padding inside the text element. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)
border	string		Border around the text element. Example format: "1px solid #FF0000"First is width of the border, next the style of the border and the color of the border. (more details here)
borderRadius	string		This property allows you to add rounded corners to the text element. Example format: "25px". (more details here)
}
position	object		Object with position parameters of text element.
{
x	string		X or horizontal position of element. Three available values: "left", "center", "right".
y	string		Y or vertical position of element. Three available values: "top", "center", "bottom".
offsetX	number		This value can be a positive or negative number and defines how much offset is added to the text element from the current X position in px.
offsetY	number		This value can be a positive or negative number and defines how much offset is added to the text element from the current Y position in px.
}
startAnimation	object		Object with start animation parameters of text element.
{
animation	string		Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")
speed	number		Duration of selected animation. Speed is defined as number in ms.
delay	number		Delay in ms of animation start.
}
endAnimation	object		Object with end animation parameters of text element.
{
animation	string		Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")
speed	number		Duration of selected animation. Speed is defined as number in ms.
delay	number		Delay in ms of animation start.
}

Heading

Parameter	Type	Default	Description
type	string	"text"	Defines type of the element. (Value for heading element is "text".)
htmlTag	string	"h2"	Defines html tag of heading element. (Default element tag heading 2).
content	string		Content of heading element.
textColor	string		Font color of the heading element. (Example: "#ffffff").
fontSize	number/string		Font size of the heading element. If value is number then default unit is px. Also it’s possible to put size as string with any unit next to the number ("12pt"). All CSS units can be found here.
fontFamily	string		Font family of the heading element. It’s possible to put any Google Font name (Example: "Pacifico"). All Google Fonts can be found here.
padding	string		Padding of the heading element. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)
paddingTop	string		Padding top of the heading element. Example format: "20px"There are properties for setting the padding only for one side of an element (top). (more details here)
paddingRight	string		Padding right of the heading element. Example format: "20px"There are properties for setting the padding only for one side of an element (right). (more details here)
paddingBottom	string		Padding bottom of the heading element. Example format: "20px"There are properties for setting the padding only for one side of an element (bottom). (more details here)
paddingLeft	string		Padding left of the heading element. Example format: "20px"There are properties for setting the padding only for one side of an element (left). (more details here)
backgroundColor	string		Background color of the heading element. Example format: "#FF0000"(more details here)
fontWeight	string		Font weight of the heading element. Example format: "bold"(more details here)
lineHeight	string		Line height of the heading element. Example format: "12px"(more details here)
textAlign	string		Text align of the heading element. Example format: "center"(more details here)
borderWidth	number/string		Sets the width of an element’s four borders. If parameter is number then default unit is in px. If value is string then value must contain units as well. This property can have from one to four values. Example format: "2px"(more details here)
borderStyle	string		Sets the style of an element’s four borders. This property can have from one to four values. Example format: "solid"(more details here)
borderColor	string		Sets the color of an element’s four borders. This property can have from one to four values. Example format: "#ff0000"(more details here)
borderRadius	number/string		Property defines the radius of the element’s corners. If parameter is number then default unit is in px. If value is string then value must contain units as well. This property can have from one to four values. Here are the rules: "15px 50px 30px 5px" (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner) (more details here).
width	number/string		Property defines the width of the element. If parameter is number then default unit is in px. If value is string then value must contain units as well. Example: "150px".
height	number/string		Property defines the height of the element. If parameter is number then default unit is in px. If value is string then value must contain units as well. Example: "150px".
customCSS	string		If you miss any CSS property add it here. Example: "margin-top: 15px; opacity: 0.5;".
cssClass	string		Add your custom CSS class WITHOUT the dot, e.g: my-class. Add multiple classes separated with space, e.g: my-class my-class-2. Classes for slide navigation: slide-next, slide-prev. Classes for go to slide: slide-1, slide-2, ...
hover	object	false	Object with custom navigation parameters in the hover state. All CSS parameters can be added in this format (check list of all properties here), example: CSS property background-color should be backgroundColor. Check some of the properties we recommend below.
{
width	string		The width property sets the width of the heading element. Example format: "150px"(more details here)
height	string		The height property sets the height of the heading element. Example format: "50px"(more details here)
backgroundColor	string		Background color on the heading element. Example format: "#FF0000"(more details here)
padding	string		Padding inside the heading element. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)
border	string		Border around the heading element. Example format: "1px solid #FF0000"First is width of the border, next the style of the border and the color of the border. (more details here)
borderRadius	string		This property allows you to add rounded corners to the heading element. Example format: "25px". (more details here)
}
position	object		Object with position parameters of heading element.
{
x	string		X or horizontal position of element. Three available values: "left", "center", "right".
y	string		Y or vertical position of element. Three available values: "top", "center", "bottom".
offsetX	number		This value can be a positive or negative number and defines how much offset is added to the heading element from the current X position in px
offsetY	number		This value can be a positive or negative number and defines how much offset is added to the heading element from the current Y position in px
}
startAnimation	object		Object with start animation parameters of heading element.
{
animation	string		Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")
speed	number		Duration of selected animation. Speed is defined as number in ms.
delay	number		Delay in ms of animation start.
}
endAnimation	object		Object with end animation parameters of heading element.
{
animation	string		Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")
speed	number		Duration of selected animation. Speed is defined as number in ms.
delay	number		Delay in ms of animation start.
}

Button

Parameter	Type	Default	Description
type	string	"button"	Defines type of the element. (Value for button element is "button".)
content	string		Content of button element.
url	string		URL of the button element. (Example: "https://example.com").
urlTarget	string		Open button link in new tab (value: "blank") or in same tab (value: "self")
textColor	string		Font color of the button element. (Example: "#ffffff").
fontSize	number/string		Font size of the button element. If value is number then default unit is px. Also it’s possible to put size as string with any unit next to the number ("12pt"). All CSS units can be found here.
fontFamily	string		Font family of the button element. It’s possible to put any Google Font name (Example: "Pacifico"). All Google Fonts can be found here.
padding	string		Padding of the button element. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)
paddingTop	string		Padding top of the button element. Example format: "20px"There are properties for setting the padding only for one side of an element (top). (more details here)
paddingRight	string		Padding right of the button element. Example format: "20px"There are properties for setting the padding only for one side of an element (right). (more details here)
paddingBottom	string		Padding bottom of the button element. Example format: "20px"There are properties for setting the padding only for one side of an element (bottom). (more details here)
paddingLeft	string		Padding left of the button element. Example format: "20px"There are properties for setting the padding only for one side of an element (left). (more details here)
backgroundColor	string		Background color of the button element. Example format: "#FF0000"(more details here)
fontWeight	string		Font weight of the button element. Example format: "bold"(more details here)
lineHeight	string		Line height of the button element. Example format: "12px"(more details here)
textAlign	string		Text align of the button element. Example format: "center"(more details here)
borderWidth	number/string		Sets the width of an element’s four borders. If parameter is number then default unit is in px. If value is string then value must contain units as well. This property can have from one to four values. Example format: "2px"(more details here)
borderStyle	string		Sets the style of an element’s four borders. This property can have from one to four values. Example format: "solid"(more details here)
borderColor	string		Sets the color of an element’s four borders. This property can have from one to four values. Example format: "#ff0000"(more details here)
borderRadius	number/string		Property defines the radius of the element’s corners. If parameter is number then default unit is in px. If value is string then value must contain units as well. This property can have from one to four values. Here are the rules: "15px 50px 30px 5px" (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner) (more details here).
width	number/string		Property defines the width of the element. If parameter is number then default unit is in px. If value is string then value must contain units as well. Example: "150px".
height	number/string		Property defines the height of the element. If parameter is number then default unit is in px. If value is string then value must contain units as well. Example: "150px".
customCSS	string		If you miss any CSS property add it here. Example: "margin-top: 15px; opacity: 0.5;".
cssClass	string		Add your custom CSS class WITHOUT the dot, e.g: my-class. Add multiple classes separated with space, e.g: my-class my-class-2. Classes for slide navigation: slide-next, slide-prev. Classes for go to slide: slide-1, slide-2, ...
hover	object	false	Object with custom navigation parameters in the hover state. All CSS parameters can be added in this format (check list of all properties here), example: CSS property background-color should be backgroundColor. Check some of the properties we recommend below.
{
width	string		The width property sets the width of the navigation button. Example format: "150px"(more details here)
height	string		The height property sets the height of the navigation button. Example format: "50px"(more details here)
backgroundColor	string		Background color on the navigation button. Example format: "#FF0000"(more details here)
padding	string		Padding inside the navigation button. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)
border	string		Border around the navigation button. Example format: "1px solid #FF0000"First is width of the border, next the style of the border and the color of the border. (more details here)
borderRadius	string		This property allows you to add rounded corners to the navigation button. Example format: "25px"For “pill” style button put “50%” as value. (more details here)
}
position	object		Object with position parameters of button element.
{
x	string		X or horizontal position of element. Three available values: "left", "center", "right".
y	string		Y or vertical position of element. Three available values: "top", "center", "bottom".
offsetX	number		This value can be a positive or negative number and defines how much offset is added to the button element from the current X position in px.
offsetY	number		This value can be a positive or negative number and defines how much offset is added to the button element from the current Y position in px.
}
startAnimation	object		Object with start animation parameters of button element.
{
animation	string		Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")
speed	number		Duration of selected animation. Speed is defined as number in ms.
delay	number		Delay in ms of animation start.
}
endAnimation	object		Object with end animation parameters of button element.
{
animation	string		Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")
speed	number		Duration of selected animation. Speed is defined as number in ms.
delay	number		Delay in ms of animation start.
}

Image

Parameter	Type	Default	Description
type	string	"image"	Defines type of the element. (Value for image element is "image".)
src	string		Path to the image src. (Example: "https://example.com/image.jpg").
padding	string		Padding of the image element. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)
paddingTop	string		Padding top of the image element. Example format: "20px"There are properties for setting the padding only for one side of an element (top). (more details here)
paddingRight	string		Padding right of the image element. Example format: "20px"There are properties for setting the padding only for one side of an element (right). (more details here)
paddingBottom	string		Padding bottom of the image element. Example format: "20px"There are properties for setting the padding only for one side of an element (bottom). (more details here)
paddingLeft	string		Padding left of the image element. Example format: "20px"There are properties for setting the padding only for one side of an element (left). (more details here)
backgroundColor	string		Background color of the image element. Example format: "#FF0000"(more details here)
borderWidth	number/string		Sets the width of an element’s four borders. If parameter is number then default unit is in px. If value is string then value must contain units as well. This property can have from one to four values. Example format: "2px"(more details here)
borderStyle	string		Sets the style of an element’s four borders. This property can have from one to four values. Example format: "solid"(more details here)
borderColor	string		Sets the color of an element’s four borders. This property can have from one to four values. Example format: "#ff0000"(more details here)
borderRadius	number/string		Property defines the radius of the element’s corners. If parameter is number then default unit is in px. If value is string then value must contain units as well. This property can have from one to four values. Here are the rules: "15px 50px 30px 5px" (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner) (more details here).
size	number		Property defines the width of the element. Parameter is number unit is in px. Example: 150. Height of image is scaled with aspect ratio of the image.
customCSS	string		If you miss any CSS property add it here. Example: "margin-top: 15px; opacity: 0.5;".
cssClass	string		Add your custom CSS class WITHOUT the dot, e.g: my-class. Add multiple classes separated with space, e.g: my-class my-class-2. Classes for slide navigation: slide-next, slide-prev. Classes for go to slide: slide-1, slide-2, ...
hover	object	false	Object with custom navigation parameters in the hover state. All CSS parameters can be added in this format (check list of all properties here), example: CSS property background-color should be backgroundColor. Check some of the properties we recommend below.
{
backgroundColor	string		Background color on the navigation image. Example format: "#FF0000"(more details here)
padding	string		Padding inside the navigation image. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)
border	string		Border around the navigation image. Example format: "1px solid #FF0000"First is width of the border, next the style of the border and the color of the border. (more details here)
borderRadius	string		This property allows you to add rounded corners to the navigation image. Example format: "25px". (more details here)
}
position	object		Object with position parameters of image element.
{
x	string		X or horizontal position of element. Three available values: "left", "center", "right".
y	string		Y or vertical position of element. Three available values: "top", "center", "bottom".
offsetX	number		This value can be a positive or negative number and defines how much offset is added to the image element from the current X position in px.
offsetY	number		This value can be a positive or negative number and defines how much offset is added to the image element from the current Y position in px.
}
startAnimation	object		Object with start animation parameters of image element.
{
animation	string		Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")
speed	number		Duration of selected animation. Speed is defined as number in ms.
delay	number		Delay in ms of animation start.
}
endAnimation	object		Object with end animation parameters of image element.
{
animation	string		Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")
speed	number		Duration of selected animation. Speed is defined as number in ms.
delay	number		Delay in ms of animation start.
}

Video

Parameter	Type	Default	Description
type	string	"video"	Defines type of the element. (Value for video element is "video".)
src	string		Path to the video src. (Example: "https://example.com/video.mp4").
padding	string		Padding of the video element. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)
paddingTop	string		Padding top of the video element. Example format: "20px"There are properties for setting the padding only for one side of an element (top). (more details here)
paddingRight	string		Padding right of the video element. Example format: "20px"There are properties for setting the padding only for one side of an element (right). (more details here)
paddingBottom	string		Padding bottom of the video element. Example format: "20px"There are properties for setting the padding only for one side of an element (bottom). (more details here)
paddingLeft	string		Padding left of the video element. Example format: "20px"There are properties for setting the padding only for one side of an element (left). (more details here)
backgroundColor	string		Background color of the video element. Example format: "#FF0000"(more details here)
borderWidth	number/string		Sets the width of an element’s four borders. If parameter is number then default unit is in px. If value is string then value must contain units as well. This property can have from one to four values. Example format: "2px"(more details here)
borderStyle	string		Sets the style of an element’s four borders. This property can have from one to four values. Example format: "solid"(more details here)
borderColor	string		Sets the color of an element’s four borders. This property can have from one to four values. Example format: "#ff0000"(more details here)
borderRadius	number/string		Property defines the radius of the element’s corners. If parameter is number then default unit is in px. If value is string then value must contain units as well. This property can have from one to four values. Here are the rules: "15px 50px 30px 5px" (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner) (more details here).
size	number		Property defines the width of the element. Parameter is number unit is in px. Example: 150. Height of video is scaled with aspect ratio of the video.
customCSS	string		If you miss any CSS property add it here. Example: "margin-top: 15px; opacity: 0.5;".
cssClass	string		Add your custom CSS class WITHOUT the dot, e.g: my-class. Add multiple classes separated with space, e.g: my-class my-class-2. Classes for slide navigation: slide-next, slide-prev. Classes for go to slide: slide-1, slide-2, ...
hover	object	false	Object with custom navigation parameters in the hover state. All CSS parameters can be added in this format (check list of all properties here), example: CSS property background-color should be backgroundColor. Check some of the properties we recommend below.
{
backgroundColor	string		Background color on the navigation video. Example format: "#FF0000"(more details here)
padding	string		Padding inside the navigation video. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)
border	string		Border around the navigation video. Example format: "1px solid #FF0000"First is width of the border, next the style of the border and the color of the border. (more details here)
borderRadius	string		This property allows you to add rounded corners to the navigation video. Example format: "25px". (more details here)
}
position	object		Object with position parameters of video element.
{
x	string		X or horizontal position of element. Three available values: "left", "center", "right".
y	string		Y or vertical position of element. Three available values: "top", "center", "bottom".
offsetX	number		This value can be a positive or negative number and defines how much offset is added to the video element from the current X position in px.
offsetY	number		This value can be a positive or negative number and defines how much offset is added to the video element from the current Y position in px.
}
startAnimation	object		Object with start animation parameters of video element.
{
animation	string		Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")
speed	number		Duration of selected animation. Speed is defined as number in ms.
delay	number		Delay in ms of animation start.
}
endAnimation	object		Object with end animation parameters of video element.
{
animation	string		Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")
speed	number		Duration of selected animation. Speed is defined as number in ms.
delay	number		Delay in ms of animation start.
}

iFrame

Parameter	Type	Default	Description
type	string	"iframe"	Defines type of the element. (Value for iFrame element is "iframe".)
src	string		Path to the iFrame src. (Example: "https://example.com").
padding	string		Padding of the iFrame element. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)
paddingTop	string		Padding top of the iFrame element. Example format: "20px"There are properties for setting the padding only for one side of an element (top). (more details here)
paddingRight	string		Padding right of the iFrame element. Example format: "20px"There are properties for setting the padding only for one side of an element (right). (more details here)
paddingBottom	string		Padding bottom of the iFrame element. Example format: "20px"There are properties for setting the padding only for one side of an element (bottom). (more details here)
paddingLeft	string		Padding left of the iFrame element. Example format: "20px"There are properties for setting the padding only for one side of an element (left). (more details here)
backgroundColor	string		Background color of the iFrame element. Example format: "#FF0000"(more details here)
borderWidth	number/string		Sets the width of an element’s four borders. If parameter is number then default unit is in px. If value is string then value must contain units as well. This property can have from one to four values. Example format: "2px"(more details here)
borderStyle	string		Sets the style of an element’s four borders. This property can have from one to four values. Example format: "solid"(more details here)
borderColor	string		Sets the color of an element’s four borders. This property can have from one to four values. Example format: "#ff0000"(more details here)
borderRadius	number/string		Property defines the radius of the element’s corners. If parameter is number then default unit is in px. If value is string then value must contain units as well. This property can have from one to four values. Here are the rules: "15px 50px 30px 5px" (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner) (more details here).
size	number		Property defines the width of the element. Parameter is number unit is in px. Example: 150. Height of iFrame is scaled with aspect ratio of the video.
customCSS	string		If you miss any CSS property add it here. Example: "margin-top: 15px; opacity: 0.5;".
cssClass	string		Add your custom CSS class WITHOUT the dot, e.g: my-class. Add multiple classes separated with space, e.g: my-class my-class-2. Classes for slide navigation: slide-next, slide-prev. Classes for go to slide: slide-1, slide-2, ...
hover	object	false	Object with custom navigation parameters in the hover state. All CSS parameters can be added in this format (check list of all properties here), example: CSS property background-color should be backgroundColor. Check some of the properties we recommend below.
{
backgroundColor	string		Background color on the navigation iFrame. Example format: "#FF0000"(more details here)
padding	string		Padding inside the navigation iFrame. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)
border	string		Border around the navigation iFrame. Example format: "1px solid #FF0000"First is width of the border, next the style of the border and the color of the border. (more details here)
borderRadius	string		This property allows you to add rounded corners to the navigation iFrame. Example format: "25px". (more details here)
}
position	object		Object with position parameters of iFrame element.
{
x	string		X or horizontal position of element. Three available values: "left", "center", "right".
y	string		Y or vertical position of element. Three available values: "top", "center", "bottom".
offsetX	number		This value can be a positive or negative number and defines how much offset is added to the video element from the current X position in px
offsetY	number		This value can be a positive or negative number and defines how much offset is added to the video element from the current Y position in px
}
startAnimation	object		Object with start animation parameters of iFrame element.
{
animation	string		Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")
speed	number		Duration of selected animation. Speed is defined as number in ms.
delay	number		Delay in ms of animation start.
}
endAnimation	object		Object with end animation parameters of iFrame element.
{
animation	string		Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")
speed	number		Duration of selected animation. Speed is defined as number in ms.
delay	number		Delay in ms of animation start.
}