fix(slides): fix rtl support.

- fix rtl functionalities in slides when attribute (dir=“rtl”) added to
ion-slides.
- e2e test added: ‘slides/test/rtl’

src/components/slides/slides.ts

@@ -139,7 +139,7 @@ import { ViewController } from '../../navigation/view-controller';
 @Component({
   selector: 'ion-slides',
   template:
-    '<div class="swiper-container">' +
+    '<div class="swiper-container" [attr.dir]="_rtl? \'rtl\' : null">' +
       '<div class="swiper-wrapper">' +
         '<ng-content></ng-content>' +
       '</div>' +
@@ -249,6 +249,14 @@ export class Slides extends Ion {
   }
   private _pager = false;
 
+/**
+ * @input {string} If dir attribute is equal to rtl, set interal _rtl to true;
+ */
+  @Input()
+  set dir(val: string) {
+    this._rtl = (val.toLowerCase() === 'rtl');
+  }
+
   /**
    * @input {string}  Type of pagination. Possible values are:
    * `bullets`, `fraction`, `progress`. Default: `bullets`.

src/components/slides/test/rtl/app.module.ts

@@ -0,0 +1,46 @@
+import { Component, ViewChild, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Slides } from '../../../../../ionic-angular';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  @ViewChild(Slides) slider: Slides;
+
+  onSlideWillChange(s: Slides) {
+    console.log(`onSlideWillChange: ${s}`);
+  }
+
+  onSlideDidChange(s: Slides) {
+    console.log(`onSlideDidChange: ${s}`);
+  }
+
+  onSlideDrag(s: Slides) {
+    console.log(`onSlideDrag: ${s}`);
+  }
+
+}
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}

src/components/slides/test/rtl/main.html

@@ -0,0 +1,21 @@
+<ion-slides style="background: black"
+            (ionSlideWillChange)="onSlideWillChange($event)"
+            (ionSlideDidChange)="onSlideDidChange($event)"
+            (ionSlideDrag)="onSlideDrag($event)"
+            pager="true"
+            dir="rtl"
+            effect="slide">
+
+  <ion-slide style="background: red; color: white;">
+    <h1>شريحة ١</h1>
+  </ion-slide>
+
+  <ion-slide style="background: white; color: blue;">
+    <h1>شريحة ٢</h1>
+  </ion-slide>
+
+  <ion-slide style="background: blue; color: white;">
+    <h1>شريحة ٣</h1>
+  </ion-slide>
+
+</ion-slides>