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