NivoSlider Control/Navigation Bar

gistfile1.html

<script type="text/javascript" src="/js/nivo-slider/jquery.nivo.slider.pack.js"></script>
<link type="text/css" rel="stylesheet" href="/js/nivo-slider/nivo-slider.css" />

<script type="text/javascript">
$(document).ready( function(){
	$('#slider').nivoSlider({
		afterLoad: function() {
			$('.nivo-controlNav').append('<ul class="nivo-controlNav-items"></ul>');
			$.each($('.nivo-control'), function(index, value) {
				$('.nivo-controlNav-items').append($('<li></li>').append($(value)));
			});
		}
	});
}); 
</script>

<style type="text/css">

.nivo-controlNav {
	position: absolute;
	bottom: 0;
	width: 100%;
	display: box;
}

.nivo-controlNav-items {
	display: table;
	width: 100%;
	margin: 0;
	padding: 0;
	text-indent: 0;
	line-height: 0;
}

.nivo-controlNav-items li {
	display: table-cell;
}

.nivo-controlNav a {
	text-indent: -9001px;
	display: block;
}
</style>