docs(slides): update API docs for slides with usage information

also updated the test for controller.

references #5508 closes driftyco/ionic-site#458

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

@@ -1,34 +1,28 @@
 import {ViewChild} from 'angular2/core';
-import {App, Slides} from 'ionic-angular';
+import {App, Page, Slides} from 'ionic-angular';
 
 
 @App({
   templateUrl: 'main.html'
 })
-class MyApp {
-  mySlideOptions: any;
-  @ViewChild(Slides) slider: Slides;
-
-  constructor() {
-    console.log("here");
-    this.mySlideOptions = {
-      initialSlide: 1,
-      autoplay: 1000
-    };
-  }
+class MyPage {
+  @ViewChild('mySlider') slider: Slides;
+  mySlideOptions = {
+    initialSlide: 1,
+    loop: true
+  };
 
   ngAfterViewInit() {
 
   }
 
   onSlideChanged() {
-    console.log("Slide Changed");
-    let isEnd = this.slider.isEnd();
-    console.log("This is the last slide?", isEnd);
+    let currentIndex = this.slider.getActiveIndex();
+    console.log("Current index is", currentIndex);
   }
 
   goToPrevSlide() {
-    this.slider.slidePrev(5000, false);
+    this.slider.slidePrev();
   }
 
   goToNextSlide() {
@@ -36,7 +30,6 @@ class MyApp {
   }
 
   goToSlide(index) {
-    console.log(index);
     this.slider.slideTo(index, 500, false);
   }
 
@@ -50,3 +43,10 @@ class MyApp {
     console.log("Current Length is", length);
   }
 }
+
+@App({
+  template: `<ion-nav [root]="root"></ion-nav>`
+})
+class E2EApp {
+  root: Page = MyPage;
+}

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

@@ -1,16 +1,16 @@
-<ion-slides [options]="mySlideOptions" (didChange)="onSlideChanged()">
+<ion-slides #mySlider [options]="mySlideOptions" (didChange)="onSlideChanged()">
   <ion-slide padding>
-    <p>Slide 1</p>
-    <button block (click)="goToSlide(3)">Navigate to 3rd Slide</button>
+    <h1>Slide 1</h1>
+    <button block (click)="goToSlide(2)">Navigate to 3rd Slide</button>
     <button block (click)="getLength()">Get Slide Length</button>
   </ion-slide>
   <ion-slide padding>
-    <p>Slide 2</p>
+    <h1>Slide 2</h1>
     <button block (click)="goToPrevSlide()">Navigate Back</button>
     <button block (click)="goToNextSlide()">Navigate Forward</button>
   </ion-slide>
   <ion-slide padding>
-    <p>Slide 3</p>
+    <h1>Slide 3</h1>
     <button block (click)="getIndex()">Get Index</button>
   </ion-slide>
 </ion-slides>