diff --git a/ionic/components/slides/slides.ts b/ionic/components/slides/slides.ts
index a871a9d94a..174616cc2d 100644
--- a/ionic/components/slides/slides.ts
+++ b/ionic/components/slides/slides.ts
@@ -53,7 +53,7 @@ import {Scroll} from '../scroll/scroll';
* After creating and configuring the slides, you can navigate between them
* by swiping or calling methods on the `Slides` instance. You can call `slideTo()` to
* navigate to a specific slide, or `slideNext()` to change to the slide that follows
- * the active slide. All of the [methods](#instance-methods) provided by the `Slides`
+ * the active slide. All of the [methods](#instance-members) provided by the `Slides`
* instance are listed below. See [Usage](#usage) below for more information on
* navigating between slides.
*
@@ -66,38 +66,108 @@ import {Scroll} from '../scroll/scroll';
*
*
* @usage
+ *
+ * You can add slides to a `@Page` using the following template:
+ *
* ```html
*
*
- *
Slide 1
- *
+ *
Slide 1
*
*
- *
Slide 2
+ *
Slide 2
*
*
- *
Slide 3
+ *
Slide 3
*
*
* ```
*
+ * To add [options](#configuring), we will define them in `mySlideOptions` in our class `MyPage`:
+ *
+ * ```ts
+ * import {Page, Slides} from 'ionic-angular';
+ *
+ * @Page({
+ * templateUrl: 'my-page.html'
+ * })
+ * class MyPage {
+ * mySlideOptions = {
+ * initialSlide: 1,
+ * loop: true
+ * };
+ * }
+ * ```
+ *
+ * This is setting the second slide as the initial slide on load, since
+ * the `initialSlide` begins at `0`. We are also setting `loop` to true which
+ * allows us to swipe from the last slide to the first continuously. Then,
+ * we will pass `mySlideOptions` in the `options` property of the ``
+ * element. We are using [property binding](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding)
+ * on `options` because `mySlideOptions` is an expression:
+ *
+ * ```html
+ *
+ * ```
+ *
+ * To grab a reference to the Slides, we will add a [local template variable](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#local-vars)
+ * to `` called `mySlider`:
+ *
+ * ```html
+ *
+ * ```
+ *
+ * Next, we can use `ViewChild` to assign the Slides instance to `slider`:
+ *
* ```ts
* import {ViewChild} from 'angular2/core';
- * import {App, Slides} from 'ionic-angular';
*
+ * class MyPage {
+ * @ViewChild('mySlider') slider: Slides;
*
- * @App({
- * templateUrl: 'main.html'
- * })
- * class MyApp {
- * @ViewChild(Slides) slider: Slides;
+ * ...
+ * }
+ * ```
*
- * goToSlide(index) {
- * this.slider.slideTo(index, 500);
+ * Now we can call any of the `Slider` [methods]((#instance-members)),
+ * for example we can use the Slider's `slideTo()` method in order to
+ * navigate to a specific slide on a button click. Below we call the
+ * `goToSlide()` method and it navigates to the 3rd slide:
+ *
+ * ```ts
+ * class MyPage {
+ * ...
+ *
+ * goToSlide() {
+ * this.slider.slideTo(2, 500);
* }
* }
* ```
*
+ * We can also add events to listen to on the `` element.
+ * Let's add the `didChange` event and call a method when the slide changes:
+ *
+ * ```html
+ *
+ * ```
+ *
+ * In our class, we add the `onSlideChanged()` method which gets the active
+ * index and prints it:
+ *
+ * ```ts
+ * class MyPage {
+ * ...
+ *
+ * onSlideChanged() {
+ * let currentIndex = this.slider.getActiveIndex();
+ * console.log("Current index is", currentIndex);
+ * }
+ * }
+ * ```
+ *
+ * For all of the methods you can call on the `Slider` instance, see the
+ * [Instance Members](#instance-members).
+ *
* @demo /docs/v2/demos/slides/
* @see {@link /docs/v2/components#slides Slides Component Docs}
*
diff --git a/ionic/components/slides/test/controller/index.ts b/ionic/components/slides/test/controller/index.ts
index 42ddeed8ca..d7ea2bd521 100644
--- a/ionic/components/slides/test/controller/index.ts
+++ b/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: ``
+})
+class E2EApp {
+ root: Page = MyPage;
+}
diff --git a/ionic/components/slides/test/controller/main.html b/ionic/components/slides/test/controller/main.html
index 5ba590e94b..05bc1727ed 100644
--- a/ionic/components/slides/test/controller/main.html
+++ b/ionic/components/slides/test/controller/main.html
@@ -1,16 +1,16 @@
-
+
-