Navigation

<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), 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)
height	string		The height property sets the height of the navigation button. Example format: "50px"(more details here)
backgroundColor	string		Background color on the navigation button. Example format: "#FF0000"(more details here)
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)
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)
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)
…	…	…	…
}
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), 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)
height	string		The height property sets the height of the navigation button. Example format: "50px"(more details here)
backgroundColor	string		Background color on the navigation button. Example format: "#FF0000"(more details here)
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)
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)
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)
…	…	…	…
}
}
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.
}