Part 7 - Navigation Arrows and Pagination Controls (Positioned Inside)

Cool! We now have a functioning slider "skeleton".



HTML Source:


<div id="slider1">
	<img src="content/image1.jpg" alt="" height="250" width="630" />
	<img src="content/image2.jpg" alt="" height="250" width="630" />
	<img src="content/image3.jpg" alt="" height="250" width="630" />
</div>
		

CSS Source:


/* Essential slider functionality (never changes) */
	.plusslider { overflow: hidden; position: relative; }
	.plusslider-container { position: relative; }
	.plusslider .child { float: left; }
	.plustype-fader .child { display: none; position: absolute; left: 0; top: 0; } /* only applies to fader type (not slider) */
	.plustype-fader .current { z-index: 5; } /* only applies to fader type (not slider) */
	.plusslider a img { border: none; } /* prevent blue borders in IE, which break "slider" type by altering the spacing */

	
/* No-javascript fallback (change "#slider1" selectors below to suit your html) */
	#slider1 > * { display: none; }
	#slider1 > *:first-child { display: block; }


/* Position the nav arrows & pagination controls */
	
	.plusslider-arrows .prev {
		/* place "prev" arrow to the left of the slider */
		position: absolute;
		top: 40%;
		left: 0;
		z-index: 6;
	}
	
	.plusslider-arrows .next {
		/* place "next" arrow to the right of the slider */
		position: absolute;
		top: 40%;
		right: 0;
		z-index: 6;
	}
	
	.plusslider-pagination-wrapper {
		/* place the pagination controls over the bottom-center of the slider */
		position: absolute;
		z-index: 6; /* ensure this appears "in front" of the slider */
		bottom: 10px;
		left: 50%; /* center horizontally (works with child's "position:relative; left:-50%;") */
	}
	
	.plusslider-pagination {
		/* center horizontally (works with parent's "position:absolute; left:50%;" -- see http://stackoverflow.com/a/1777282/477513 ) */
		position: relative;
		left: -50%;
	}


/* Style the nav arrows & pagination controls */
	.plusslider-arrows,
	.plusslider-pagination {
		/* reset default list styles */
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.plusslider-arrows li {
		/* make these look like basic buttons, and make them clearly visible over the slides */
		margin: 5px;
		padding: 5px;
		text-align: center;
		border: 1px solid black;
		background-color: white;
		cursor: pointer;
	}
	
	.plusslider-pagination li {
		/* line these up in a row and make them clearly visible over the slides */
		float: left;
		margin-left: 5px;
		padding: 5px;
		background-color: white;
		cursor: pointer;
	}
		

Javascript Source (in html <head>):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.plusslider-min.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$('#slider1').plusSlider({
			sliderType: 'slider' //'slider' or 'fader'
		});
	});
</script>
		

← back to part 6 | continue to part 8 →