# Template widget - tutorial & examples - make your own widget!

**URL:** <https://community.openhab.org/t/template-widget-tutorial-examples-make-your-own-widget/14211>\
**Category:** HABPanel\
**Tags:** habpanel, template, widget\
**Created:** [September 17, 2016, 8:02pm UTC](https://community.openhab.org/t/template-widget-tutorial-examples-make-your-own-widget/14211 "2016-09-17T20:02:21Z")\
**Posts on this page:** 1\
**Showing post:** 156

<div class="post-metadata">

**Author:** ![chris\_van\_aalst](https://community.openhab.org/letter_avatar_proxy/v4/letter/c/a3d4f5/32.png) [@chris\_van\_aalst](https://community.openhab.org/u/chris_van_aalst)\
**Post date:** [March 5, 2017, 4:08pm UTC](https://community.openhab.org/t/template-widget-tutorial-examples-make-your-own-widget/14211/156 "2017-03-05T16:08:20Z")

</div>

Yannick,

this works: a snapshot of my Webcam - refreshes every 1 second and changes Webcam every 5 seconds !

Thanks very much !

Chris

```auto
<div style="height: 610px">
  <div uib-carousel active="0" interval="5000" no-wrap="false">
    <div uib-slide index="0" ng-init="model1 = { 'url':'http://192.168.0.118/snap.jpeg', 'refresh': 1 }">
      <widget-image ng-model="model1" style="margin:auto;"/>
    </div>
    <div uib-slide index="1" ng-init="model2 = { 'url':'http://192.168.0.121/snap.jpeg', 'refresh': 1 }">
      <widget-image ng-model="model2" style="margin:auto;"/>
    </div>
    <div uib-slide index="2" ng-init="model3 = { 'url':'http://192.168.0.122/snap.jpeg', 'refresh': 1 }">
      <widget-image ng-model="model3" style="margin:auto;"/>
    </div>
    <div uib-slide index="3" ng-init="model4 = { 'url':'http://192.168.0.123/snap.jpeg', 'refresh': 1 }">
      <widget-image ng-model="model4" style="margin:auto;"/>
    </div>
  </div>
</div>

```

---

_[View the full topic](https://community.openhab.org/t/template-widget-tutorial-examples-make-your-own-widget/14211)._