feat(slider): new swiper component

ionic/components/slides/test/basic/index.ts

@@ -1,14 +1,45 @@
-import {App} from 'ionic/ionic';
+import {App, IonicApp, Http} from 'ionic/ionic';
 
 
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {
-  next() {
-    console.log('Next');
+class MyApp {
+  constructor(private app: IonicApp) {
+    this.extraOptions = {
+      loop: true
+    };
+
+    this.images = [];
+
+    let tags = "amsterdam";
+    let FLICKR_API_KEY = '504fd7414f6275eb5b657ddbfba80a2c';
+
+    let baseUrl = 'https://api.flickr.com/services/rest/';
+
+    Http.get(baseUrl + '?method=flickr.groups.pools.getPhotos&group_id=1463451@N25&safe_search=1&api_key=' + FLICKR_API_KEY + '&jsoncallback=JSON_CALLBACK&format=json&tags=' + tags, {
+      method: 'jsonp'
+    }).then((val) => {
+      this.images = val.photos.photo;
+      this.slider.update();
+    }, (err) => {
+      alert('Unable to load images');
+      console.error(err);
+    })
   }
-  prev() {
-    console.log('Prev');
+
+  onInit() {
+    setTimeout(() => {
+      this.slider = this.app.getComponent('slider');
+      console.log('Got slider', this.slider);
+    });
+  }
+
+  getImageUrl(item) {
+    return "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret + "_z.jpg";
+  }
+
+  doRefresh() {
+    console.log('DOREFRESH')
   }
 }

ionic/components/slides/test/basic/main.html

@@ -1,15 +1,5 @@
-<ion-slides #slides>
-  <ion-slide style="background-color: blue">
-    <h2>Page 1</h2>
-  </ion-slide>
-  <ion-slide style="background-color: yellow">
-    <h2>Page 2</h2>
+<ion-slides [options]="extraOptions" id="slider" style="background-color: black">
+  <ion-slide *ng-for="#image of images">
+    <img data-src="{{getImageUrl(image)}}" slide-lazy>
   </ion-slide>
 </ion-slides>
-
-<!--
-<div style="position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center">
-  <button (click)="slides.prev()">Prev</button>
-  <button (click)="slides.next()">Next</button>
-</div>
--->