> For the complete documentation index, see [llms.txt](https://transition-slider.gitbook.io/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://transition-slider.gitbook.io/jquery/layer-options/element-parameters.md). # Element parameters ```markup ``` 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](https://www.w3schools.com/cssref/css_units.asp). | | `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](https://fonts.google.com/). | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `backgroundColor` | `string` | | Background color of the text element. Example format: `"#FF0000"`(more details [here](https://www.w3schools.com/cssref/pr_background-color.asp)) | | `fontWeight` | `string` | | Font weight of the text element. Example format: `"bold"`(more details [here](https://www.w3schools.com/cssref/pr_font_weight.asp)) | | `lineHeight` | `string` | | Line height of the text element. Example format: `"12px"`(more details [here](https://www.w3schools.com/cssref/pr_dim_line-height.asp)) | | `textAlign` | `string` | | Text align of the text element. Example format: `"center"`(more details [here](https://www.w3schools.com/cssref/pr_text_text-align.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-width.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-style.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-color.asp)) | | `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](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)). | | `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](https://www.w3schools.com/cssref/)), 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](https://www.w3schools.com/cssref/pr_dim_width.asp)) | | `height` | `string` | | The height property sets the height of the text element. Example format: `"50px"`(more details [here](https://www.w3schools.com/cssref/pr_dim_height.asp)) | | `backgroundColor` | `string` | | Background color on the text element. Example format: `"#FF0000"`(more details [here](https://www.w3schools.com/cssref/pr_background-color.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/cssref/pr_border.asp)) | | `borderRadius` | `string` | | This property allows you to add rounded corners to the text element. Example format: `"25px"`. (more details [here](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)) | | `}` | | | | | `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](https://daneden.github.io/animate.css/). (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](https://daneden.github.io/animate.css/). (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](https://www.w3schools.com/cssref/css_units.asp). | | `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](https://fonts.google.com/). | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `backgroundColor` | `string` | | Background color of the heading element. Example format: `"#FF0000"`(more details [here](https://www.w3schools.com/cssref/pr_background-color.asp)) | | `fontWeight` | `string` | | Font weight of the heading element. Example format: `"bold"`(more details [here](https://www.w3schools.com/cssref/pr_font_weight.asp)) | | `lineHeight` | `string` | | Line height of the heading element. Example format: `"12px"`(more details [here](https://www.w3schools.com/cssref/pr_dim_line-height.asp)) | | `textAlign` | `string` | | Text align of the heading element. Example format: `"center"`(more details [here](https://www.w3schools.com/cssref/pr_text_text-align.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-width.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-style.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-color.asp)) | | `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](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)). | | `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](https://www.w3schools.com/cssref/)), 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](https://www.w3schools.com/cssref/pr_dim_width.asp)) | | `height` | `string` | | The height property sets the height of the heading element. Example format: `"50px"`(more details [here](https://www.w3schools.com/cssref/pr_dim_height.asp)) | | `backgroundColor` | `string` | | Background color on the heading element. Example format: `"#FF0000"`(more details [here](https://www.w3schools.com/cssref/pr_background-color.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/cssref/pr_border.asp)) | | `borderRadius` | `string` | | This property allows you to add rounded corners to the heading element. Example format: `"25px"`. (more details [here](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)) | | `}` | | | | | `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](https://daneden.github.io/animate.css/). (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](https://daneden.github.io/animate.css/). (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](https://www.w3schools.com/cssref/css_units.asp). | | `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](https://fonts.google.com/). | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `backgroundColor` | `string` | | Background color of the button element. Example format: `"#FF0000"`(more details [here](https://www.w3schools.com/cssref/pr_background-color.asp)) | | `fontWeight` | `string` | | Font weight of the button element. Example format: `"bold"`(more details [here](https://www.w3schools.com/cssref/pr_font_weight.asp)) | | `lineHeight` | `string` | | Line height of the button element. Example format: `"12px"`(more details [here](https://www.w3schools.com/cssref/pr_dim_line-height.asp)) | | `textAlign` | `string` | | Text align of the button element. Example format: `"center"`(more details [here](https://www.w3schools.com/cssref/pr_text_text-align.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-width.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-style.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-color.asp)) | | `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](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)). | | `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](https://www.w3schools.com/cssref/)), 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](https://www.w3schools.com/cssref/pr_dim_width.asp)) | | `height` | `string` | | The height property sets the height of the navigation button. Example format: `"50px"`(more details [here](https://www.w3schools.com/cssref/pr_dim_height.asp)) | | `backgroundColor` | `string` | | Background color on the navigation button. Example format: `"#FF0000"`(more details [here](https://www.w3schools.com/cssref/pr_background-color.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/cssref/pr_border.asp)) | | `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](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)) | | `}` | | | | | `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](https://daneden.github.io/animate.css/). (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](https://daneden.github.io/animate.css/). (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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `backgroundColor` | `string` | | Background color of the image element. Example format: `"#FF0000"`(more details [here](https://www.w3schools.com/cssref/pr_background-color.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-width.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-style.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-color.asp)) | | `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](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)). | | `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](https://www.w3schools.com/cssref/)), 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](https://www.w3schools.com/cssref/pr_background-color.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/cssref/pr_border.asp)) | | `borderRadius` | `string` | | This property allows you to add rounded corners to the navigation image. Example format: `"25px"`. (more details [here](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)) | | `}` | | | | | `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](https://daneden.github.io/animate.css/). (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](https://daneden.github.io/animate.css/). (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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `backgroundColor` | `string` | | Background color of the video element. Example format: `"#FF0000"`(more details [here](https://www.w3schools.com/cssref/pr_background-color.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-width.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-style.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-color.asp)) | | `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](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)). | | `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](https://www.w3schools.com/cssref/)), 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](https://www.w3schools.com/cssref/pr_background-color.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/cssref/pr_border.asp)) | | `borderRadius` | `string` | | This property allows you to add rounded corners to the navigation video. Example format: `"25px"`. (more details [here](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)) | | `}` | | | | | `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](https://daneden.github.io/animate.css/). (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](https://daneden.github.io/animate.css/). (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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `backgroundColor` | `string` | | Background color of the iFrame element. Example format: `"#FF0000"`(more details [here](https://www.w3schools.com/cssref/pr_background-color.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-width.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-style.asp)) | | `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](https://www.w3schools.com/cssref/pr_border-color.asp)) | | `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](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)). | | `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](https://www.w3schools.com/cssref/)), 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](https://www.w3schools.com/cssref/pr_background-color.asp)) | | `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](https://www.w3schools.com/css/css_padding.asp)) | | `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](https://www.w3schools.com/cssref/pr_border.asp)) | | `borderRadius` | `string` | | This property allows you to add rounded corners to the navigation iFrame. Example format: `"25px"`. (more details [here](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)) | | `}` | | | | | `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](https://daneden.github.io/animate.css/). (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](https://daneden.github.io/animate.css/). (Example: `"fadeInDown"`) | | `speed` | `number` | | Duration of selected animation. Speed is defined as `number` in `ms`. | | `delay` | `number` | | Delay in `ms` of animation start. | | `}` | | | |