# Navigation

```markup
<script>
    jQuery(document).ready(function($) {
        $("#slider-wrapper").transitionSlider({
            // example of navigation options
            navigation: {
                style: 'effect6',
                normal: {
                    color: '#333333',
                    backgroundColor: 'rgba(255,255,255,0.5)',
                    height: '16px',
                    width: '16px'
                },
                hover: {
                    backgroundColor: 'rgba(255,255,255,0.3)',
                    height: '16px',
                    width: '16px'
                },
            },
            keyboard: {
                enabled: true
            }
        });
    });
</script>
```

| Parameter         | Type             | Default     | Description                                                                                                                                                                                                                                                                                                       |
| ----------------- | ---------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `navigation`      | `object/boolean` | `true`      | Object with navigation parameters.                                                                                                                                                                                                                                                                                |
| `{`               |                  |             |                                                                                                                                                                                                                                                                                                                   |
| `style`           | `string`         | `"effect4"` | Predefined navigation styles. Values: `effect1, effect2, effect3, effect4, effect5, effect6, effect7, effect8, effect9, effect10`                                                                                                                                                                                 |
| `normal`          | `object`         | `false`     | Object with custom navigation parameters in the normal 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))                                                                                   |
| …                 | …                | …           | …                                                                                                                                                                                                                                                                                                                 |
| `}`               |                  |             |                                                                                                                                                                                                                                                                                                                   |
| `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))                                                                                   |
| …                 | …                | …           | …                                                                                                                                                                                                                                                                                                                 |
| `}`               |                  |             |                                                                                                                                                                                                                                                                                                                   |
| `}`               |                  |             |                                                                                                                                                                                                                                                                                                                   |
| `keyboard`        | `object/boolean` | `true`      | Enables navigation through slides using keyboard. Object with keyboard parameters or boolean true to enable with default settings.                                                                                                                                                                                |
| `{`               |                  |             |                                                                                                                                                                                                                                                                                                                   |
| `enabled`         | `boolean`        | `true`      | Set to false to disable keyboard control.                                                                                                                                                                                                                                                                         |
| `}`               |                  |             |                                                                                                                                                                                                                                                                                                                   |