Ionic 2 slides sliding not working in RTL (From RC.5)

[theunreal]

Ionic version: (check one with "x") [ ] 1.x [ x] 2.x

I'm submitting a ... (check one with "x") [x ] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: When moving to the next slides in RTL app, the slide dissappear and it's impossible to click anywhere on the app.

Expected behavior: Sliding to the next slide work as slides suppose to work in RTL apps

Related code:

<ion-slides pager *ngIf="showSlides">

  <ion-slide style="background-color: #1C4080">
    test
  </ion-slide>

  <ion-slide style="background-color: #1C4080">
    test2
  </ion-slide>

  <ion-slide style="background-color: #1C4080">
    test3
  </ion-slide>

</ion-slides>

If you will add style="direction:ltr", the slides will work.

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic 2 RC.5 (slides refactoring)

[jafaripur]

Same #10028

[abehairy]

@theunreal Hello,

Here's a solution I tried and worked. It turns out that you that there's a _rtl property which is private and not exposed in the Slides API. When set to true, everything works fine. The problem is I'm not able to update this property on ionViewDidLoad or ngAfterViewInit. It only works if you explicitly set it true by clicking a button.

import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams , ViewController, Slides} from 'ionic-angular';
import { StartPage } from '../start/start';

@Component({
  selector: 'page-tutorial',
  templateUrl: 'tutorial.html'
})
export class TutorialPage {
  @ViewChild(Slides) slides: Slides;

  constructor(public navCtrl: NavController, public navParams: NavParams) {

  }

 startApp() {
    this.navCtrl.push(StartPage);
  }

  ngAfterViewInit() {
    this.slides.freeMode = true;
  }

//TRY calling this function on a button click/tap. IT WORKS !
  fixrtl(){
      this.slides_rtl = true
  }

// Doesn't work here !
  ionViewDidLoad() {
      this.slides_rtl = true
  }

}

If you find a way to set/modify the _rtl property on Load, let me know.

[muhamedhfayiz]

I too have same problem in ionic2 slides in RTL direction Its my HTML code <ion-slides (ionSlideDidChange)="slideChanged()" dir="rtl">

When i am using this.slides.lockSwipeToNext(true) ts file for my last slide its misbehaving, Its not working properly. and if i swipe Previous its take me to first slide, that is index 0 slide.

[mqasem92]

@abehairy thanks for your solution

you can call this.slider._rtl inside ionViewDidEnter() event insted of ionViewDidLoad

Here's my code and working 👍

ionViewDidEnter() {
    if (this.translateService.currentLang == 'ar') { this.slider._rtl = true }
    console.log("ionViewDidEnter");
  }

[faridabbas-dl]

Its very simple the above answers are right but no one know where to place it. Here is the sample code thats works perfectly. OnInit does everything for you. import { OnInit } from '@angular/core'; class MyComponent implements OnInit { @ViewChild(Slides) slides: Slides; ngOnInit() { this.slides._rtl = true; } }

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.