# page indicator loop

**URL:** <https://forums.fusetools.com/t/page-indicator-loop/1972>\
**Category:** General\
**Created:** [August 13, 2017, 11:21pm UTC](https://forums.fusetools.com/t/page-indicator-loop/1972 "2017-08-13T23:21:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tom1](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@Tom1](https://forums.fusetools.com/u/Tom1)\
**Post date:** [August 13, 2017, 11:21pm UTC](https://forums.fusetools.com/t/page-indicator-loop/1972/1 "2017-08-13T23:21:12Z")

</div>

i followed this step…and got confused where do put settimeout func.  
[https://www.fusetools.com/community/forums/general/page](https://www.fusetools.com/community/forums/general/page)

my code look like this…  
my ux code

```
 <FileImageSource ux:Key="A" File="../Assets/a.jpg"/>
<FileImageSource ux:Key="B" File="../Assets/b.jpg"/>
<FileImageSource ux:Key="C" File="../Assets/c.jpg"/>
<FileImageSource ux:Key="D File="../Assets/d.jpg"/>

<Rectangle Color="#fff3" Height="190" CornerRadius="1.5">
    <PageControl ux:Name="nav">
    <Each Items="{changeImage}">
        <Page>
        <Image Source="{DataToResource img}" StretchMode="UniformToFill"/>
        <DropShadow/>
        </Page>
    </Each>
    </PageControl>
            <PageIndicator Dock="Bottom" Navigation="nav" Alignment="Center">
            <Rectangle ux:Template="Dot" Width="30" Height="30" Margin="10" Color="#fff">
        <ActivatingAnimation>
            <Scale Factor="1.3" />
        </ActivatingAnimation>
    </Rectangle>
</PageIndicator>
</Rectangle>

```

In my separate Js file

```
    var changeImage= 
     [{ img: "A" },
        { img: "B" },
        { img: "C" },
        { img: "D" },];
 var Observable = require("FuseJS/Observable");
var x = Observable(1);
function increment() {
    x.value++;
    setTimeout(increment, 2000);
}
increment();
module.exports = {
    x: x
};
  module.exports = {
  changeImage:changeImage
 };

```

Got confused where to implement settimeout() func so that image inside rectangle rotate every 5 sec.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [August 14, 2017, 8:16am UTC](https://forums.fusetools.com/t/page-indicator-loop/1972/2 "2017-08-14T08:16:02Z")

</div>

You’ve got the place for `setTimeout()` just right. There’s a lot of other things you confused though.

Here’s some code that does what you needed, loosely based on code snippets you were showing:

```auto
<App Background="#0006">
	<FileImageSource ux:Key="A" File="A.jpg"/>
	<FileImageSource ux:Key="B" File="B.jpg"/>
	<FileImageSource ux:Key="C" File="C.jpg"/>
	<FileImageSource ux:Key="D" File="D.jpg"/>

	<JavaScript>
	var Observable = require("FuseJS/Observable");
	var images = [
		{img: "A"},
		{img: "B"},
		{img: "C"},
		{img: "D"}
	];
	var x = Observable(0);

	function increment() {
		if (x.value < images.length - 1) {
			x.value++;
		} else {
			x.value = 0;
		}
		setTimeout(increment, 2000);
	}

	module.exports = {
		x: x,
		images: images,
		increment: increment
	};
	</JavaScript>

	<DockPanel>
	    <PageControl ux:Name="nav" ActiveIndex="{x}" Placed="{increment}">
		    <Each Items="{images}">
		        <Page>
		        	<Image Source="{DataToResource img}" StretchMode="UniformToFill"/>
		        </Page>
		    </Each>
	    </PageControl>
	    <PageIndicator Dock="Bottom" Navigation="nav" Alignment="Center">
	        <Rectangle ux:Template="Dot" Width="30" Height="30" Margin="10" Color="#fff">
		        <ActivatingAnimation>
		            <Scale Factor="1.3" />
		        </ActivatingAnimation>
		    </Rectangle>
		</PageIndicator>
	</DockPanel>
</App>

```

---

<div class="post-metadata">

**Author:** ![Tom1](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@Tom1](https://forums.fusetools.com/u/Tom1)\
**Post date:** [August 14, 2017, 4:29pm UTC](https://forums.fusetools.com/t/page-indicator-loop/1972/3 "2017-08-14T16:29:49Z")

</div>

Thanks Uldis. Works perfectly.