title: Add carousel image in nativescript app
body: <p>I'm learning nativescript.I want to add carousel image in the first Tab.I have found javascript &amp; xml file on the net for it,but I don't know how I can use these java &amp; xml files.Could you help me please ? </p>
  
  <p>app.component.html:</p>
  
  <pre><code>&lt;TabView #tabView [items]="tabviewitems" (selectedIndexChanged)="tabViewIndexChange(tabView.selectedIndex)" dir="rtl"&gt;&lt;/TabView&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component } from "@angular/core";
  import { StackLayout } from "ui/layouts/stack-layout";
  import { Label } from "ui/label";
  import { TabView, SelectedIndexChangedEventData, TabViewItem } from "ui/tab-view";
  import { View } from "ui/core/view";
  
  @Component({
      moduleId: module.id,
      templateUrl: "./app.component.html",
  })
  export class AppComponent {
      public tabviewitems: Array&lt;TabViewItem&gt;;
  
      constructor() {
          this.tabviewitems = [];
  
          let innerFirstStackLayout = new StackLayout();
          let firstLabel = new Label();
          firstLabel.margin = "15";
          firstLabel.text = "Label first page";
          innerFirstStackLayout.addChild(firstLabel);
  
          let innerSecondStackLayout = new StackLayout();
          let secondLabel = new Label();
          secondLabel.margin = "15";
          secondLabel.text = "Label second page";
          innerSecondStackLayout.addChild(secondLabel);
  
          let innerThirdStackLayout = new StackLayout();
          let thirdLabel = new Label();
          thirdLabel.margin = "15";
          thirdLabel.text = "Label third page";
          innerThirdStackLayout.addChild(thirdLabel);
  
          this.tabviewitems.push(this.createTabItem("Tab1", innerFirstStackLayout));
          this.tabviewitems.push(this.createTabItem("Tab2", innerSecondStackLayout));
          this.tabviewitems.push(this.createTabItem("Tab3", innerThirdStackLayout));
  
      }
  
      public tabViewIndexChange(res) {
          alert("Tab View selected index: " + res);
  
      }
  
      createTabItem(title: string, view: View): TabViewItem {
          const item = new TabViewItem();
          item.title = title;
          item.view = view;
          return item;
      }
  }
  </code></pre>
  
  <p>carousel2.xml :</p>
  
  <pre><code>&lt;Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" xmlns:ns="nativescript-carousel"&gt;
  &lt;Page.actionBar&gt;
      &lt;ActionBar title="Dynamic"&gt;&lt;/ActionBar&gt;
  &lt;/Page.actionBar&gt;
  
  &lt;ScrollView&gt;
      &lt;StackLayout&gt;
          &lt;Label text="Define a template and assign the 'items' array." textWrap="true" margin="10,0,0,0"/&gt;
          &lt;Label text="Also works well innside a ScrollView." textWrap="true" margin="0,0,20,0" /&gt;
  
          &lt;StackLayout height="100" verticalAlignment="center"&gt;
              &lt;Label text="Some content here..." textWrYou need to specify all --key-store-* options.
      * --key-store-alias - Provides the alias for the keystore file specified with --key-store-path. You can use the --key-store-* options along with --release to produce a signed release build. You need to specify all --key-store-* options.
      * --key-store-alias-password - Provides the password for the alias specified with --key-store-alias-password. You can use the --key-store-* options along with --release to produce a signed release build. You need to specify all --key-store-* options.
  
  ### Attributes
  
      * &lt;Device ID&gt; is the index or Device Identifierap="true"/&gt;
          &lt;/StackLayout&gt;
  
          &lt;GridLayout height="250"&gt;
              &lt;ns:Carousel id="myCarousel" height="250" color="white" pageChanged="myChangeEvent" pageTapped="mySelectedEvent" pageScrolling="myScrollingEvent" android:indicatorAnimation="slide"
                  items="{{ myDataArray }}" indicatorColor="#fff"&gt;
                  &lt;ns:Carousel.itemTemplate&gt;
                      &lt;ns:CarouselItem  verticalAlignment="center" backgroundColor="{{ color }}" height="250"&gt;
                          &lt;GridLayout rows="*" columns="*,*"&gt;
                               &lt;Label text="{{ title }}"  horizontalAlignment="center" verticalAlignment="center" col="0"/&gt;
                              &lt;Image src="{{ image }}" height="100" col="1" /&gt;
                          &lt;/GridLayout&gt;
                      &lt;/ns:CarouselItem&gt;
                  &lt;/ns:Carousel.itemTemplate&gt;
              &lt;/ns:Carousel&gt;
          &lt;/GridLayout&gt;
  
          &lt;Label text="Indicator animation type: 'slide'" textWrap="true" ios:visibility="collapsed" margin="10,0,0,0"/&gt;
  
          &lt;Button text="Select page 3" tap="selectPageEvent" margin="10,10,0,10"/&gt;
          &lt;StackLayout height="400" margin="10,0,0,0"&gt;
              &lt;Label text="Some content here..." textWrap="true" /&gt;
          &lt;/StackLayout&gt;
      &lt;/StackLayout&gt;
  &lt;/ScrollView&gt;
  &lt;/Page&gt;
  </code></pre>
  
  <p>carousel2.js</p>
  
  <pre><code> var observableModule = require("data/observable");
  var pageData = new observableModule.Observable();
  var myDataArray = [
      {title:"Slide 1", color: "#b3cde0", image:"https://raw.githubusercontent.com/manijak/nativescript-photoviewer/master/demo/res/01.jpg"},
      {title:"Slide 2", color: "#6497b1", image:"https://raw.githubusercontent.com/manijak/nativescript-photoviewer/master/demo/res/02.jpg"},
      {title:"Slide 3", color: "#005b96", image:"https://raw.githubusercontent.com/manijak/nativescript-photoviewer/master/demo/res/03.jpg"},
      {title:"Slide 4", color: "#03396c", image:"https://raw.githubusercontent.com/manijak/nativescript-photoviewer/master/demo/res/04.jpg"}
      /*{title:"Slide 5", color: "#011f4b", image: ""}*/
  ];
  var myCarousel = null;
  pageData.set("myDataArray", myDataArray);
  
  function pageLoaded(args) {
      var page = args.object;
      page.bindingContext = pageData;
  
      myCarousel = page.getViewById("myCarousel");
  }
  exports.pageLoaded = pageLoaded;
  
  exports.selectPageEvent = function(args){
      if(!myCarousel) return;
      myCarousel.selectedPage = 2;
  }
  
  exports.myScrollingEvent = function(args){
      console.log("Scrolling: " + args.state.offset);
  }
  </code></pre>