> For the complete documentation index, see [llms.txt](https://transition-slider.gitbook.io/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://transition-slider.gitbook.io/jquery/slider-options/pagination.md).

# Pagination

```markup
<script>
    jQuery(document).ready(function($) {
        $("#slider-wrapper").transitionSlider({
            // example of pagination style options
            pagination: {
                enable: 1,
                style: 'effect5',
                dynamicBullets: false,
                clickable: true,
                type: 'bullets',
                normal: {
                    backgroundColor: '#ffffff',
                    border: '1px solid #e44119',
                    width: '7px',
                    height: '7px',
                    opacity: 1,
                    borderRadius: '50%',
                    boxShadow: 'none'
                },
                active: {
                    backgroundColor: '#ffffff',
                    border: 'none',
                    width: '10px',
                    height: '10px',
                    opacity: 1,
                    borderRadius: '50%',
                    boxShadow: 'none'
                },
                hover: {
                    backgroundColor: '#ffffff',
                    border: 'none',
                    width: '10px',
                    height: '10px',
                    opacity: 1,
                    borderRadius: '50%',
                    boxShadow: 'none'
                }
            }
        });
    });
</script>
```

| **Parameter**     | Type             | Default | Description                                                                                                                                                                                                                                                                                                       |
| ----------------- | ---------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `pagination`      | `object/boolean` | `false` | Object with pagination parameters.                                                                                                                                                                                                                                                                                |
| `{`               |                  |         |                                                                                                                                                                                                                                                                                                                   |
| `style`           | `string`         |         | Predefined pagination styles. Values: `effect1, effect2, effect3, effect4, effect5, effect6, effect7, effect8, effect9, effect10`                                                                                                                                                                                 |
| `clickable`       | `boolean`        |         | If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type (`style: effect1, effect2, effect5, effect6`)                                                                                                                                             |
| `dynamicBullets`  | `boolean`        |         | Good to enable if you use bullets pagination with a lot of slides. So it will keep only few bullets visible at the same time.                                                                                                                                                                                     |
| `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 pagination 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 pagination button. Example format: `"50px"` (more details here)                                                                                                                                                                                                        |
| `backgroundColor` | `string`         |         | Background color on the pagination button. Example format: `"#FF0000"` (more details [here](https://www.w3schools.com/cssref/pr_background-color.asp))                                                                                                                                                            |
| `padding`         | `string`         |         | Padding inside the pagination 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 pagination 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 pagination 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 pagination 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 pagination 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 pagination button. Example format: `"50px"` (more details here)                                                                                                                                                                                                        |
| `backgroundColor` | `string`         |         | Background color on the pagination button. Example format: `"#FF0000"` (more details [here](https://www.w3schools.com/cssref/pr_background-color.asp))                                                                                                                                                            |
| `padding`         | `string`         |         | Padding inside the pagination 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 pagination 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 pagination 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))                                                                                  |
| …                 | …                | …       | …                                                                                                                                                                                                                                                                                                                 |
| `}`               |                  |         |                                                                                                                                                                                                                                                                                                                   |
| `active`          | `object`         | `false` | Object with custom pagination parameters in the active 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 pagination 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 pagination button. Example format: `"50px"` (more details here)                                                                                                                                                                                                        |
| `backgroundColor` | `string`         |         | Background color on the pagination button. Example format: `"#FF0000"` (more details [here](https://www.w3schools.com/cssref/pr_background-color.asp))                                                                                                                                                            |
| `padding`         | `string`         |         | Padding inside the pagination 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 pagination 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 pagination 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))                                                                                  |
| …                 | …                | …       | …                                                                                                                                                                                                                                                                                                                 |
| `}`               |                  |         |                                                                                                                                                                                                                                                                                                                   |
| `}`               |                  |         |                                                                                                                                                                                                                                                                                                                   |