# SLIDER REVOLUTION - The Responsive Slider Plugin

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

## Change Navigation Style via CSS

You can turn on / off independent the Arrows and Bullets in the Slider. You can use Bullets or Thumbnails. You can set independent the position of arrows, thumbnails and bullets.

Since Slider Revolution has a few prepared style of Thumbnails, bullets and Arrows, you dont need to style them at all. However in some cases you wish to have your own styled navigation buttons.For this we show you how to do so:

### Change the the Navigation via Options

    		<script type="text/javascript">

    		var revapi;

    			jQuery(document).ready(function() {

    			   revapi = jQuery('.tp-banner').revolution(
    				{
    					delay:9000,
    					startwidth:1170,
    					startheight:500,

    					hideThumbs:200,

    					thumbWidth:100,
    					thumbHeight:50,
    					thumbAmount:3,

    					navigationType:"bullet",     // use none, bullet or thumb
    					navigationArrows:"solo",     // nexttobullets, solo (old name verticalcentered), none

    					navigationStyle:"round",     // round, square, navbar, round-old, square-old, navbar-old

    					navigationHAlign:"center",   // left,center,right
    					navigationVAlign:"bottom",   // top,center,bottom
    					navigationHOffset:0,		 // offset position from aligned position
    					navigationVOffset:0,		 // offset position from aligned position

    					soloArrowLeftHalign:"left",	 // left,center,right
    					soloArrowLeftValign:"bottom",// top,center,bottom
    					soloArrowLeftHOffset:20,	 // offset position from aligned position
    					soloArrowLeftVOffset:20,	 // offset position from aligned position

    					soloArrowRightHalign:"right",	// left,center,right
    					soloArrowRightValign:"bottom",	// top,center,bottom
    					soloArrowRightHOffset:20,		// offset position from aligned position
    					soloArrowRightVOffset:20,		// offset position from aligned position

    					touchenabled:"on",
    					onHoverStop:"on"

    				});

    			});	//ready

    		</script>

### Change the Style of the Navigation Arrows via StyleSheet

You can add the following lines to your Style Sheet

    		.tparrows {

    		    cursor: pointer;

    		    background: rgba(0, 0, 0, 0.5) !important;
    		    -webkit-border-radius: 5px;
    		    border-radius: 5px;
    		    width: 40px !important;
    		    height: 40px !important;

    		}

    		.tparrows:before {
    		    font-family: 'revicons';
    			color: #fff;
    		    font-style: normal;
    		    font-weight: normal;
    		    speak: none;
    		    display: inline-block;
    		    text-decoration: inherit;
    		    margin-right: 0;
    		    margin-top: 9px;
    		    text-align: center;
    		    width: 40px;
    		    font-size: 20px;
    		}

    		.tparrows:hover {
    		    color: #fff;
    		}

    		.tp-leftarrow:before {
    		    content: '\e824';
    		}

    		tp-rightarrow:before {
    		    content: '\e825';
    		}

    		.tparrows.tp-rightarrow:before {
    		    margin-left: 1px;
    		}

    		.tparrows:hover {
    		    background: rgba(0, 0, 0, 1) !important;
    		}

### Change the Style of the Bullets via StyleSheet

You can add the following lines to your Style Sheet

    		.tp-bullets.simplebullets.navbar {

    		    height: 35px;
    		    padding: 0px 0px;

    		}
    		.tp-bullets.simplebullets .bullet {
    		    cursor: pointer;
    		    position: relative !important;
    		    background: rgba(0, 0, 0, 0.5) !important;
    		    -webkit-border-radius: 10px;
    		    border-radius: 10px;
    		    -webkit-box-shadow: none;
    		    -moz-box-shadow: none;
    		    box-shadow: none;
    		    width: 6px !important;
    		    height: 6px !important;
    		    border: 5px solid rgba(0, 0, 0, 0) !important;
    		    display: inline-block;
    		    margin-right: 2px !important;
    		    margin-bottom: 14px !important;
    		    -webkit-transition: background-color 0.2s, border-color 0.2s;
    		    -moz-transition: background-color 0.2s, border-color 0.2s;
    		    -o-transition: background-color 0.2s, border-color 0.2s;
    		    -ms-transition: background-color 0.2s, border-color 0.2s;
    		    transition: background-color 0.2s, border-color 0.2s;
    		    float:none !important;
    		}
    		.tp-bullets.simplebullets .bullet.last {
    		    margin-right: 0px
    		}
    		.tp-bullets.simplebullets .bullet:hover,
    		.tp-bullets.simplebullets .bullet.selected {
    		    -webkit-box-shadow: none;
    		    -moz-box-shadow: none;
    		    box-shadow: none;
    			background: rgba(255, 255, 255, 1) !important;
    			width: 6px !important;
    		    height: 6px !important;
    		    border: 5px solid rgba(0, 0, 0, 1) !important;
    		}