Pagination test

by Marcus

HTML

<body onload="pSlide()">
		<header>
			
		</header>
		
		<div style="height: 3.8em;"></div>
		
		<section class="page" id="page01" data-page="1">
			first section
		</section>
		
		<section class="page" id="page02" data-page="2">
			second section
		</section>
		
		<section class="page" id="page03" data-page="3">
			third section
		</section>
		
		<section class="page" id="page04" data-page="4">
			fourth section
		</section>
		
		<footer>
			
			<nav class="foot-nav">
				<span id="back-link" class="page_change">
					&#60;
				</span>
				
				<span>1</span>
				<span>/</span>
				<span>4</span>
				
				<span id="next-link" class="page_change">
					&#62;
				</span>
			</nav>
			
		</footer>
		
	</body>

CSS

*{
				margin: none;
				padding: none;
			}
			
			body{
				background-color: #333;
			}
			
			header{
				width: 100%;
				height: 4em;
				background-color: #414149;
				position: absolute;
				right: 0;
				top: 0;
				left: 0;
				text-align: center;
				display: block;
			}
			
			footer{
				width: 100%;
				height: 2.9em;
				background-color: #414149;
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				text-align: center;
				display: block;
			}
			
			
			
			.foot-nav{
				width: 22%;
				height: 66%;
				background-color: aliceblue;
				margin: .22em auto;
				font-size: 2em;
			}
			
			.page{
				height: 83vh;
				background-color: #777;
				margin: auto;
			}
			
			#page01{
				display: block;
			}
			
			#page02{
				display: none;
			}
			
			#page03{
				display: none;
			}
			
			#page04{
				display: none;
			}
			
			#back-link{
				float: left;
				margin-left: 17%;
			}
			
			#next-link{
				float: right;
				margin-right: 17%;
			}

JavaScript

function pSlide(){
			
			/* links to navigate slides */
			var back = $("#back-link");
			var next = $("#next-link");
			
			/* collects the count of elements with page class */
			var pCount = $(".page").length;
			
			/* points to the visible slide and selects id */
			var curPage = $('.page[style*="block"]').attr('id');
			
			/* collects value of custom data attribute from visible slide */
			var curPageNo = curPage.data('page');
			
			/* adds or subtracts from the value of data attribute to select slides */
			var prePage = curPageNo - 1;
			var nexPage = curPageNo + 1;
			
			
			
			/* back link */
			$(back).click(function(){
				
				/* turns off current slide */
				$(curPage).css("display", "none");
				
				/* if the first page is visible select last page */
				if (curPageNo == 1){
					
					/* selects page with value of total count */
					$(".page").data('page' == pCount).css("style", "block");
				}
				
				/* if any slice other than the first one is active */
				else{
					
					/* calculates value of previous page */
					$(".page").data('page' + prePage).css("style", "block");
				}
					
			});
			
			/* same as back link but in reverse to move forwards */
			$(next).click(function(){
				$(curPage).css("display", "none");
				
				if (curPageNo == pCount){
					$(".page").data('page' == 1).css("style", "block");
				}
				else{
					$(".page").data('page' + nexPage).css("style", "block");
				}
					
			});
			
			
		}