//index.html

<div id="pageIndicatorPage" class="ui-page" data-enable-page-scroll="false">
	<header class="ui-header">
		<h2 class="ui-title">Page Indicator</h2>
	</header>
	<div id="pageIndicator" class="ui-page-indicator"></div>
	<div id="hsectionchanger" class="ui-content">
		<div>
			<section class="ui-section-active" style="text-align:center" >
				<h3> Page1 of 5</h3>
			</section>
			<section style="text-align:center">
				<h3> Page2 of 5</h3>
			</section>
			<section style="text-align:center">
				<h3> Page3 of 5</h3>
			</section>
			<section style="text-align:center">
				<h3> Page4 of 5 </h3>
			</section>
			<section style="text-align:center">
				<h3> Page5 of 5 </h3>
			</section>
		</div>
	</div>
	
	<script>
(function() {
	var self = this,
		page = document.getElementById( "pageIndicatorPage" ),
		changer = document.getElementById( "hsectionchanger" ),
		sectionChanger,
		elPageIndicator = document.getElementById("pageIndicator"),
		pageIndicator,
		pageIndicatorHandler;

	page.addEventListener( "pagebeforeshow", function() {
		// Create PageIndicator
		pageIndicator =  tau.widget.PageIndicator(elPageIndicator, { numberOfPages: 5 });
		pageIndicator.setActive(0);

		sectionChanger = new tau.widget.SectionChanger(changer, {
			circular: true,
			orientation: "horizontal",
			useBouncingEffect: true
		});
	});

	page.addEventListener( "pagehide", function() {
		sectionChanger.destroy();
		pageIndicator.destroy();
	});

	// Indicator setting handler
	pageIndicatorHandler = function (e) {
		pageIndicator.setActive(e.detail.active);
	};

	// Bind the callback
	changer.addEventListener("sectionchange", pageIndicatorHandler, false);
})();

</script>

//style.css
#pageIndicatorPage {
    position: absolute;
    left: 0px;
    top: 0px;
    background-image:url('../images/bg.png');
    background-repeat: no-repeat;
    width: 360px;
    height: 360px;
}