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

# Element parameters

```markup
<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:&#x20;

* **Text**
* **Heading**
* **Image**
* **Button**
* **Video**
* **iFrame**

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

### Text <a href="#articletoc_0" id="articletoc_0"></a>

| 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 <a href="#articletoc_0" id="articletoc_0"></a>

| 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 <a href="#articletoc_1" id="articletoc_1"></a>

| 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 <a href="#articletoc_2" id="articletoc_2"></a>

| 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 <a href="#articletoc_2" id="articletoc_2"></a>

| 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 <a href="#articletoc_2" id="articletoc_2"></a>

| 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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `}`               |                 |            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
