Pagination

<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), 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)

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)

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)

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)

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)

}

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), 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)

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)

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)

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)

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)

}

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), 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)

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)

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)

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)

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)

}

}

Last updated