<!DOCTYPE html>
<html lang="en-AU">
<head>
<!--[if lte IE 9]><script src="assets/ie.lteIE9.js"></script><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="initial-scale=1, minimum-scale=1" />
<title>Pagination Demo</title>
<link rel="stylesheet" type="text/css" href="assets/demo.css" />
</head>


<body>
	<h1></h1>
	<div id="pager"></div>
	
	<script src="../src/helpers.js"></script>
	<script src="../src/pagination.js"></script>
	<script>
		"use strict";
		
		var h1    = document.querySelector("h1");
		var el    = document.getElementById("pager");
		var pager = new Pagination(el, {
			onChange: function(index){
				h1.textContent = "Page " + (index+1) + " of " + this.length;
			}
		});
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en-AU">
<head>
<!--[if lte IE 9]><script src="assets/ie.lteIE9.js"></script><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="initial-scale=1, minimum-scale=1" />
<title>Pagination Demo</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Redressed" />
<link rel="stylesheet" type="text/css" href="assets/demo.css" />
</head>


<body>
	<h1></h1>
	<div id="pager"></div>
	
	<script src="../src/helpers.js"></script>
	<script src="../src/pagination.js"></script>
	<script>
		"use strict";
		
		var h1    = document.querySelector("h1");
		var el    = document.getElementById("pager");
		var pager = new Pagination(el, {
			onChange: function(index){
				h1.textContent = "Page " + (index+1) + " of " + this.length;
			}
		});
	</script>
</body>
</html>

Add link to Google Fonts for demo file's typeface
Add link to Google Fonts for demo file's typeface
