fix(slides): convert loop attribute to a boolean and index to a number before passing to slides

Not sure I like the index attribute though.

Fixes #5189

ionic/components/slides/slides.ts

@@ -142,10 +142,15 @@ export class Slides extends Ion {
     }
 
     this.showPager = isTrueProperty(this.pager);
+    this.loop = isTrueProperty(this.loop);
 
+    if (typeof(this.index) != 'undefined') {
+      this.index = parseInt(this.index);
+    }
 
     var options = defaults({
       loop: this.loop,
+      initialSlide: this.index,
       pagination: '.swiper-pagination',
       paginationClickable: true,
       lazyLoading: true,

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

@@ -21,6 +21,8 @@ class MyApp {
         class: "blue"
       }
     ];
+
+    this.startingIndex = 2;
   }
 
   onSlideChanged(slider) {

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

@@ -1,10 +1,26 @@
-<ion-slides loop="true" id="loopSlider" (change)="onSlideChanged($event)" pager>
-  <ion-slide *ngFor="#slide of slides" [ngClass]="slide.class">
-    {{ slide.name }}
-  </ion-slide>
-</ion-slides>
+<div class="slides-div">
+  <ion-slides [index]="startingIndex" loop="true" id="loopSlider" (change)="onSlideChanged($event)" pager>
+    <ion-slide *ngFor="#slide of slides" [ngClass]="slide.class">
+      Loop {{ slide.name }}
+    </ion-slide>
+  </ion-slides>
+</div>
+
+
+<div class="slides-div">
+  <ion-slides loop="false" id="loopSlider" (change)="onSlideChanged($event)" pager>
+    <ion-slide *ngFor="#slide of slides" [ngClass]="slide.class">
+      Don't Loop {{ slide.name }}
+    </ion-slide>
+  </ion-slides>
+</div>
 
 <style>
+  .slides-div {
+    height: 50%;
+    border-bottom: 1px solid #ccc;
+  }
+
   .yellow {
     background-color: #fbeb14;
   }