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)
…	…	…	…
}
}