I am trying the Page Indicator in Tizen Wearable Application for Gear S3 Frontier. When I use the code pasted there, It works fine for text only. E.g. when I try to add controls on each section (being shown as page on the screen) It doesn’t work. Even if I set a background image the whole design gets scattered. 

Here’s my code (slighlty modified from the original article):

HTML:

<div id="taskListPage" class="ui-page" data-enable-page-scroll="false">
    	<div id="pageIndicator" class="ui-page-indicator" data-layout="circular"></div>
			<div id="hsectionchanger" class="ui-content">
				<!-- section changer has only one child. -->
				<div>
					<section class="ui-section-active">
						<h3> Page1 of 2</h3>
					</section>
					<section>
						<h3> Page2 of 2</h3>
					</section>
				</div>
			</div>
		</div>

CSS:

.ui-content section {
    overflow: hidden;
	overflow-y: auto;
	text-align: center;
}

JavaScript:

/*global tau */
(function() {

	var page = document.getElementById("taskListPage"),
		changer = document.getElementById("hsectionchanger"),
		sections = document.querySelectorAll("section"),
		sectionChanger,
		elPageIndicator = document.getElementById("pageIndicator"),
		pageIndicator,
		pageIndicatorHandler;

	/**
	 * pagebeforeshow event handler
	 * Do preparatory works and adds event listeners
	 */
	page.addEventListener( "pagebeforeshow", function() {
		// make PageIndicator
		pageIndicator =  tau.widget.PageIndicator(elPageIndicator, { numberOfPages: sections.length });
		pageIndicator.setActive(0);
		// make SectionChanger object
		sectionChanger = new tau.widget.SectionChanger(changer, {
			circular: true,
			orientation: "horizontal",
			useBouncingEffect: true
		});
	});

	/**
	 * pagehide event handler
	 * Destroys and removes event listeners
	 */
	page.addEventListener( "pagehide", function() {
		// release object
		sectionChanger.destroy();
		pageIndicator.destroy();
	});

	/**
	 * sectionchange event handler
	 */
	pageIndicatorHandler = function (e) {
		pageIndicator.setActive(e.detail.active);
	};

	changer.addEventListener("sectionchange", pageIndicatorHandler, false);

}());

Error when I run the script:

file:///lib/tau/wearable/js/tau.min.js (20) :[tau][10/24/2019, 1:28:31 AM]