test(slides): update slide tests to use options instead of attributes

references #5189

Author: brandyscarney

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

@@ -9,7 +9,7 @@ class MyApp {
     this.app = app;
     this.http = http;
 
-    this.extraOptions = {
+    this.mySlideOptions = {
       loop: true
     };
 

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

@@ -1,4 +1,4 @@
-<ion-slides [options]="extraOptions" id="slider" style="background-color: black" zoom>
+<ion-slides [options]="mySlideOptions" id="slider" style="background-color: black">
   <ion-slide *ngFor="#image of images">
     <img data-src="{{getImageUrl(image)}}" slide-lazy>
   </ion-slide>

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

@@ -5,6 +5,8 @@ import {App, Page, NavController} from 'ionic/ionic';
   template: '<ion-nav [root]="rootPage"></ion-nav>'
 })
 class MyApp {
+  rootPage;
+
   constructor() {
     this.rootPage = IntroPage;
   }
@@ -15,9 +17,18 @@ class MyApp {
 })
 class IntroPage {
   continueText: string = "Skip";
+  startingIndex: number = 1;
+  mySlideOptions;
 
-  constructor(public nav: NavController) {
+  constructor(nav: NavController) {
+    this.nav = nav;
 
+    this.mySlideOptions = {
+      paginationClickable: true,
+      lazyLoading: true,
+      preloadImages: false,
+      initialSlide: this.startingIndex
+    };
   }
 
   onSlideChanged(slider) {

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

@@ -8,7 +8,7 @@
 </ion-navbar>
 
 <ion-content>
-  <ion-slides pager (change)="onSlideChanged($event)" (slideChangeStart)="onSlideChangeStart($event)" (move)="onSlideMove($event)" loop="true">
+  <ion-slides pager [options]="mySlideOptions" (change)="onSlideChanged($event)" (slideChangeStart)="onSlideChangeStart($event)" (move)="onSlideMove($event)">
     <ion-slide>
       <h3>Thank you for choosing the Awesome App!</h3>
       <div id="logo">

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

@@ -23,6 +23,11 @@ class MyApp {
     ];
 
     this.startingIndex = 2;
+
+    this.myTopSlideOptions = {
+      index: this.startingIndex,
+      loop: true
+    };
   }
 
   onSlideChanged(slider) {

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

@@ -1,5 +1,5 @@
 <div class="slides-div">
-  <ion-slides [index]="startingIndex" loop="true" id="loopSlider" (change)="onSlideChanged($event)" pager>
+  <ion-slides [options]="myTopSlideOptions" id="loopSlider" (change)="onSlideChanged($event)" pager>
     <ion-slide *ngFor="#slide of slides" [ngClass]="slide.class">
       Loop {{ slide.name }}
     </ion-slide>
@@ -8,7 +8,7 @@
 
 
 <div class="slides-div">
-  <ion-slides loop="false" id="loopSlider" (change)="onSlideChanged($event)" pager>
+  <ion-slides (change)="onSlideChanged($event)" pager>
     <ion-slide *ngFor="#slide of slides" [ngClass]="slide.class">
       Don't Loop {{ slide.name }}
     </ion-slide>

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

@@ -6,9 +6,9 @@
 
   <div style="height: 300px">
     <ion-slides pager="true">
-      <ion-slide class="yellow">Slide 1</ion-slide>
-      <ion-slide class="blue">Slide 2</ion-slide>
-      <ion-slide class="red">Slide 3</ion-slide>
+      <ion-slide style="background-color: yellow">Slide 1</ion-slide>
+      <ion-slide style="background-color: blue">Slide 2</ion-slide>
+      <ion-slide style="background-color: red">Slide 3</ion-slide>
     </ion-slides>
   </div>
   <ion-list>
@@ -18,17 +18,3 @@
   </ion-list>
 
 </ion-content>
-
-<style>
-  .yellow {
-    background-color: yellow;
-  }
-
-  .blue {
-    background-color: blue;
-  }
-
-  .red {
-    background-color: red;
-  }
-</style>