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;
		}