STYLE OPTIONS

10 Predefined Color Schemes

CHOOSE YOUR COLOR SKIN


CHOOSE YOUR LAYOUT STYLE

Patterns for Boxed Version

Images for Boxed Version


×

Revolution Slider

Navigation Styledocumentation exmaple

This example is provided by the vendor. This is also included on purchased version!
You can easy edit any example using caption & transition editor.
Revolution Slider - one of the most powerful available sliders!


  • slidebg1
  • slidebg1
  • slidebg1
  • slidebg1
  • slidebg1
  • slidebg1
  • slidebg1
  • slidebg1
  • slidebg1
  • slidebg1
  • slidebg1
  • slidebg1
  • slidebg1
  • slidebg1
  • slidebg1
  • slidebg1

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