Revolution Slider

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